股票Android浏览器上的模糊图像

Posted

技术标签:

【中文标题】股票Android浏览器上的模糊图像【英文标题】:Blurry images on stock android browser 【发布时间】:2013-04-24 23:04:39 【问题描述】:

我数周以来一直试图解决这个问题,但没有找到真正的解决方案。我发现了一种解决方法,但我觉得它很烦人。

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

【问题讨论】:

它与“浮动”有关,因为当我移除浮动时,图像加载清晰。 所以我想通了。我的解决方案是从“固定”定位切换到“绝对”定位。它现在可以在 s3 的默认浏览器上完美呈现。我猜在默认浏览器上存在某种固定位置的错误:/ 说实话,移动观看应避免使用固定或绝对定位。在许多移动设备中,甚至不支持固定定位。 你应该注意到facebook使用绝对定位而不是固定的:-)我猜他们也有同样的问题。 【参考方案1】:

我遇到了同样的问题,发现问题的原因是默认 android 网络浏览器(不是 Chrome!)上的 position:fixedz-index

去掉这些css属性后,我所有的图片都变得非常清晰了。

根据我的经验,position:fixed 对于移动设备来说是不行的,尤其是在 Android 和较早的 ios 版本上。我所知道的唯一能很好处理position:fixed的移动操作系统是iOS6及更高版本。


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

【讨论】:

【参考方案2】:

我从您的屏幕截图中注意到,您目前正在通过 4G(即:移动连接)进行测试。

您是否尝试过通过 wifi 重复测试?您需要确保在比较时不提取缓存,因此也值得将浏览器置于隐私浏览/隐身模式 - 这将迫使它从主机获取新资产而不是使用内部缓存的资产(比擦除您的每次浏览器缓存)。

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

我可能有点离题,但你肯定应该检查一下,这样你至少可以把这种可能性从你的清单上划掉。

如果确实如此,那么整个事情都会有一个非常有趣的讨论: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浏览器上的模糊图像的主要内容,如果未能解决你的问题,请参考以下文章

Android SDK 的快速位图模糊

使用 CSS 缩小图像…图像在几个浏览器中模糊

Android股票浏览器不尊重CSS溢出

android图像模糊技术

在 Android 上的 Cordova 应用程序中的弹出窗口后面模糊

检测在 Android 股票浏览器上作为主屏幕应用程序运行的 Web 应用程序