为什么我的图像和背景图像在移动设备上如此模糊（使用引导程序）

Question

编辑：这实际上似乎是移动版Chrome的错误！在所有其他移动和桌面浏览器中，重复的bg图像显示完全正常。 Chrome非常扭曲。

我们正在Bootstrap上建立一个响应式网站。

我在页面顶部有一个固定的pos导航栏，其中一个简单的7x157px img设置为背景。我也在身体后面使用类似的重复图案背景图像。在导航栏上有一个普通的块级DOM图像。

在桌面上这些看起来完全没问题但是当我在Note 3（1080p屏幕）上查看它们时，图案化的bg图像和标题上的静态图像都非常模糊到模式丢失的程度，它看起来像一团糟。

我尝试过设置视口，播放背景重复和背景大小，似乎没有任何效果。这可能是一个Bootstrap的东西，还是这个图案背景太小的区域？最令我困惑的是，DOM级别img同样模糊，即使它只是显示实际大小（我没有使用％s或其他任何东西来扩展或缩小）。

我附上图片以供参考。

Answer 1

像素密度，伙计。

您的设备实际上拥有比广告更多的像素。我的平板电脑比桌面显示器和高清电视的像素更多。当苹果公司推出令人敬畏的视网膜显示器时，这是一个令人讨厌的问题。

问题在于他们希望自己的设备拥有令人惊叹的分辨能力，让图像流行......但如果他们没有捏造他们的数字，那么一个可观的800px宽的网站只会占用在1600像素宽的iPad上显示屏幕的一半。而且，即使您将视口缩放到设备宽度，任何800px的横幅图像仍然会升级到1600px - 这就是您的模糊性。

因此，您需要为不同的分辨率创建不同的图像并使用媒体查询，除非您想浪费用户的带宽。我感觉到你的痛苦，但图像生成工具有所帮助 - 所有照片处理软件包都配备了这样做。

我还没有使用Note进行测试，但我认为WebKit指南也适用于那里。

进一步阅读：

https://developer.apple.com/library/safari/documentation/NetworkingInternet/Conceptual/SafariImageDeliveryBestPractices/ServingImagestoRetinaDisplays/ServingImagestoRetinaDisplays.html#//apple_ref/doc/uid/TP40012449-CH3-SW1

http://css-tricks.com/snippets/css/retina-display-media-query/

Answer 2

Android确实针对密度扩展，以适应Android生态系统不同的屏幕密度。默认情况下，Android浏览器以中等屏幕密度为目标，尝试模拟元素的大小，就像屏幕是MDPI屏幕一样。

使用this website，您可以看到此扩展的结果是：device-width为601 px且device-height为880 px在Nexus 7上。因此，它属于您的max-width: 720px声明，背景显示为红色。

您必须记住，视口大小和屏幕尺寸完全是两件事。

如果您不想要此行为，可以将target-densitydpi=device-dpi添加到<meta name="viewport">标记中。这将禁用Android目标密度缩放：device-width和device-height将报告设备的原生屏幕分辨率。

有关Android目标密度扩展的更多信息，请参见Android Developers' Documentation。

Answer 3

我尝试了很多不同的视口组合，背景大小，重复，定位等。最后，获得原始产品的可重复产品的唯一方法是拍摄我的6x157像素图像并将其平铺在PS中1920x157px。条形的高度手动设置为157.这产生了所需的结果，水平重复的背景图像在同一＆＃34;缩放＆＃34;作为桌面模式。我进一步尝试在photoshop中再次将图像提升到4000x157px并显示相同，一切都很好。然后我又恢复到最初的6x157px并且猜测是什么，它仍然被janked。所以我的猜测是横向重复的图案类型图像在现代移动浏览器中表现不稳定，可能是因为一些奇怪的缩放/ ppi相关的东西，最安全的赌注是创建这些类型图像的移动版本，这些图像比你需要的大，只是夹在一边。如果我错了，请有人介入并告诉我。

这是我为此准备的一个小测试网站：

http://ghostmounta.in/hotspot/

继续使用开发工具并将url（＆＃39; img / header_background3.png＆＃39;）更改为img / header_background.png，并将img / header_background2.png更改为示例。