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

Question

我已经试图解决这个问题好几个星期,并没有找到真正的解决方案.我发现了一个解决方法,但我发现它非常烦人.

我的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移动和其他移动页面加载了漂亮的清晰图像/图标.谢谢!

Answer 1

我有同样的问题,并发现该问题的原因是position:fixed和z-index在默认的Android网络浏览器(不是浏览器!).

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

从我的经验,position:fixed是一个不走的移动,特别是在Android和iOS的较旧版本.我知道唯一可以处理的移动操作系统position:fixed是iOS6及更高版本.

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

Answer 2

我从您的屏幕截图中注意到您当前正在通过 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>

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