Question

我一直在努力解决这个问题几个星期，并没有找到真正的解决方案。我发现了一个解决方法，但我发现它非常烦人。

我的Galaxy S3默认浏览器上的图像加载模糊，但是在chrome＆amp; 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移动和其他移动页面加载了漂亮的清晰图像/图标。谢谢！

Answer 1

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

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

根据我的经验，position:fixed对于移动设备来说是禁止，尤其是在Android和旧版iOS上。我知道唯一可以处理position:fixed的移动操作系统是iOS6及更高版本。

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

Answer 2

我从你的截图中注意到你正在通过4G（即：移动连接）对此进行测试。

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

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

我可能会偏离标志，但肯定是你应该检查的东西，这样你至少可以从列表中删除这种可能性。

如果情况确实如此，则对整个事情进行真正有趣的讨论：http://blog.sebcante.com/2012/01/prevent-image-compression-from-3g.html

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

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

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

最后，HTML5 boilerplate的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>

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

库存android浏览器上的模糊图像

2 个答案: