android - 股票 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

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

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

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

---

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