8

几周来我一直试图解决这个问题，但没有找到真正的解决方案。我发现了一种解决方法，但我觉得它很烦人。

图像在我的 Galaxy S3 的默认浏览器上加载模糊，但在 chrome 和 firefox 中它们加载完美，无需解决方法。对于高 DPI 屏幕，图像已经是 2 倍，所以这不是问题。

解决方法是将任何文本放在链接中。我放 ”。”

<a href="#">.</a>

并使字体大小非常小。

#closeButton a{
float:left;
display:block;
position:fixed;
top:9px;
left:10px;
width:46px;
height:44px;
background:url(../img/camera/closeX@2x.png) 0 0 no-repeat;  
background-size:46px 90px;
text-align:center;
font-size:1px;
color:#FFF;
}
#closeButton a:active{
background-position:0 -45px;    
}

<span id="closeButton"><a ontouchstart="" href="vibes.html"></a></span>

没有解决方法的屏幕截图：http: //igor2.com/blurry/no-text.png

带有解决方法的屏幕截图：http: //igor2.com/blurry/with-text.png

任何帮助，将不胜感激！我一直在拔头发试图弄清楚这一点。必须有一个解决方案，因为 facebook 移动和其他移动页面加载漂亮清晰的图像/图标。谢谢！

4

2 回答 2

5

position:fixed我遇到了同样的问题，发现问题的原因是z-index默认的 Android 网络浏览器（不是Chrome！）。

去掉这些 css 属性后，我所有的图像都变得非常清晰。

根据我的经验，移动设备position:fixed是不行的，尤其是在 Android 和较旧的 iOS 版本上。我所知道的唯一能position:fixed很好处理的移动操作系统是iOS6及更高版本。

更新：到目前为止，我所知道的唯一解决方法是简单地避免组合position:fixedand z-index。有时只是摆脱 z-index 就可以解决问题，或者position:fixed在 iOS 和 Android 上根本不使用。无论如何，这在移动设备上并不是一个好习惯。除此之外，您只能祈祷 Chrome 将来会尽快在大多数 Android 设备上取代 Android Stock Browser 作为默认浏览器。

于 2013-05-28T08:24:47.347 回答
-1

我从您的屏幕截图中注意到，您目前正在通过 4G 进行测试（即：移动连接）。

您是否尝试过通过 wifi 重复测试？您需要确保在比较时不提取缓存，因此也值得将浏览器置于隐私浏览/隐身模式 - 这将迫使它从主机获取新资产而不是使用内部缓存的资产（比擦除您的浏览器缓存每次）。

我提到设备互联网连接的原因是去年我遇到了一个非常相似的问题，经过大量搜索后，我意识到这是网络代理在交付之前压缩图像以节省带宽。

我可能有点离题，但这当然是你应该检查的东西，这样你至少可以把这种可能性从你的名单上划掉。

如果事实证明是这样，那么整个事情都会有一个非常有趣的讨论：http: //blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

坏消息是移动网络并不总是关注无缓存的 http 标头。

可用的三个最简单的选项是：

  • 通过 https 提供您的图像 - 网络不会缓存加密流量；
  • 通过不同的 http 端口提供您的图像；
  • 使用 data-url 嵌入图像（尽管此时有浏览器支持的含义）。

最后，在HTML5 样板的 htaccess 文件中有一个部分解决方法，可以在一定程度上减轻这些影响。在 htaccess 文件中：

# ----------------------------------------------------------------------
# Prevent mobile network providers from modifying your site
# ----------------------------------------------------------------------

# The following header prevents modification of your code over 3G on some
# European providers.
# This is the official 'bypass' suggested by O2 in the UK.

<IfModule mod_headers.c>
Header set Cache-Control "no-transform"
</IfModule>

这适用于我测试过的几个英国网络，但您的结果可能会有所不同..

于 2013-05-23T10:06:45.493 回答