从来没有人完全回答过这个类似的问题，
因此，我将针对我的情况发布我自己的版本。
问题是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 测试徽标起初是模糊的。如果position:fixed从 中删除#top-nav-container，则徽标清晰明了。所以我的问题是，我如何同时保留position:fixed一个清晰的标志？
在我的真实网站中，顶部导航应该在您滚动浏览网站时保持固定。我尝试使用position:absolute和使用 javascript 在滚动上重新定位顶部导航，但这会导致一大堆跳跃/闪烁效果。因此，如果我无法使用position:fixed或position:absolute无法将顶部导航固定到移动 Web 浏览器的顶部，我还有哪些其他选择？其他移动网站是如何实现这一结果的？
附加信息：
我对调整图像大小、更改视口和更改位置进行了更多实验：固定/绝对，并得出了一些有趣的结果。见下文：
- position:fixed no-background-size with-viewport -模糊
- position:fixed no-background-size without-viewport -清晰
- 位置：固定背景大小：20% with-viewport -模糊
位置：固定背景尺寸：20% 无视口 -模糊
position:absolute no-background-size with-viewport -模糊
- position:absolute no-background-size without-viewport -清晰
- 位置：绝对背景尺寸：20% with-viewport -清晰
- 位置：绝对背景尺寸：20% 无视口 -清晰
以下是阅读此图表的方法：
第一列说明
#top-nav-container是使用 position:fixed 还是 position:absolute第二列说明我是否使用
background-size:20%或省略了它第三列说明我是否
<meta viewport>在头部包含标签第四列说明 optix 测试标志是模糊还是清晰。
查看结果，您可以看到，只有在没有通过 background-size 或或使用视口拉伸或压缩图像时，才能使用具有 position:fixed 的容器获得清晰的图像。此外，唯一一次使用具有 position:absolute 的容器获得模糊图像的情况是，当图像被背景尺寸和视口拉伸时。