从来没有人完全回答过这个类似的问题，
Blurry images on stock android browser
因此，我将针对我的情况发布我自己的版本。
问题是 position:fixed导致子图像元素在某些 Android 浏览器中变得模糊。在我的例子中，它导致运行 Android 4.0 的 Galaxy Note v1 标准浏览器遇到这个问题。其他人也对某些 Galaxy S3 说了同样的话。这是我的代码:
预览@ http://jl.evermight.net/blurryposition/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, maximum-scale=1.0,initial-scale=1.0, user-scalable=no" />
</head>
<body>
<div id="top-nav-container"
style="
display:block;
top:0px;
position:fixed;
width:100%; height:5.2rem;
">
<a style="background-image:url(logotest_big.jpg);
background-size:20%;
display:block;
width:500px;
height:200px;
"></a>
</div>
</body>
</html>
您会注意到 OPTIX 测试 Logo 最初是模糊的。如果删除 position:fixed来自 #top-nav-container , 然后 Logo 清晰明了。所以我的问题是，如何同时保留 position:fixed和清晰的标志？
在我的真实网站中，当您滚动浏览网站时，顶部导航应该保持固定。我尝试使用 position:absolute并使用 javascript 在滚动条上重新定位顶部导航，但这导致了一大堆跳跃/闪烁效果。所以如果我不能使用 position:fixed或 position:absolute要将顶部导航固定到移动网络浏览器的顶部，我还有哪些其他选择？其他手机网站是如何做到这一点的？
附加信息:
我对调整图像大小、更改视口(viewport)和更改 position:fixed/absolute 进行了更多实验，并得出了一些有趣的结果。见下文:
- position:fixed no-background-size with-viewport - 模糊
- position:fixed no-background-size without-viewport - crisp
- position:fixed background-size:20% with-viewport - 模糊
position:fixed background-size:20% without-viewport - 模糊
position:absolute no-background-size with-viewport - 模糊
- position:absolute no-background-size without-viewport - 清晰
- position:absolute background-size:20% with-viewport - 清晰
- position:absolute background-size:20% without-viewport - 清晰
阅读此图表的方法如下:
第一列说明是否
#top-nav-container正在使用 position:fixed 或 position:absolute第二列说明我是否使用了
background-size:20%或者如果我省略了它第三列说明我是否包括了
<meta viewport>头部标记第四列说明 optix 测试 Logo 是模糊的还是清晰的。
查看结果，您可以看到只有当图像未通过背景大小或视口(viewport)拉伸(stretch)或压缩时，您才能使用具有 position:fixed 的容器获得清晰图像。此外，唯一一次使用具有 position:absolute 的容器获得模糊图像是在使用背景大小和视口(viewport)拉伸(stretch)图像时。
最佳答案
在移动设备上使用 position: fixed 仍然是个坏主意。绝大多数网站都回退到移动 View 的静态标题(即没有 float 导航栏)。
我最近遇到了类似的问题，如 this question 中所示.
一些资源给你:
- 阅读关于 Quirksmode 的这篇文章以了解问题:http://www.quirksmode.org/blog/archives/2010/12/the_fifth_posit.html
- 在下表中查看哪些移动浏览器支持
position: fixed:http://caniuse.com/#search=fixed
关于android - CSS 位置 :fixed causes blurry images in Android Browsers，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/17343897/