twitter-bootstrap 为什么我的图像和背景图像在移动设备上如此模糊（使用引导程序）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23551904/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why are my images and background images so blurry on mobile device ( using bootstrap )
提问by user3618095
EDIT: This actually appears to be a bug with the mobile version of Chrome! In all other mobile and desktop browsers the repeated bg image displays completely normal. Chrome it is horribly distorted.
编辑：这实际上似乎是 Chrome 移动版的错误！在所有其他移动和桌面浏览器中，重复的 bg 图像显示完全正常。铬它是可怕的扭曲。
We are building a responsive site on Bootstrap.
我们正在 Bootstrap 上构建响应式站点。
I have a fixed pos nav bar at the top of the page with a simple 7x157px img set as the background. I am also using a similar repeated patterned background image later on the body. On the navbar there is a normal block level DOM image.
我在页面顶部有一个固定的 pos 导航栏，并将一个简单的 7x157px img 设置为背景。我稍后还在身体上使用了类似的重复图案背景图像。在导航栏上有一个普通的块级 DOM 图像。
On desktop these look completely fine but when I view them on my Note 3 (1080p screen) both the patterned bg images and the static image on the header are going very blurry to the point where the pattern is lost and it looks like a mess.
在桌面上，这些看起来完全没问题，但是当我在 Note 3（1080p 屏幕）上查看它们时，带图案的 bg 图像和标题上的静态图像都变得非常模糊，以至于图案丢失并且看起来像一团糟。
I have tried setting the viewport, playing with background repeat and background size, and nothing seems to work. Is this possibly a Bootstrap thing or is the area just too small for this sort of patterned background? What confuses me the most is that the DOM level img is just as blurry even though it should just be displaying actual size (I'm not scaling it up or down with %s or anything).
我试过设置视口，播放背景重复和背景大小，但似乎没有任何效果。这可能是 Bootstrap 的东西，还是对于这种带图案的背景来说区域太小了？最让我困惑的是 DOM 级别的 img 也同样模糊，即使它应该只显示实际大小（我没有用 %s 或任何东西放大或缩小它）。
I'm ill attaching an image for reference.
我生病附上一张图片以供参考。
回答by Mister Epic
Pixel density, dude.
像素密度，伙计。
Your device actually has way more pixels than it advertises. My tablet has more pixels than my desktop monitor and my high-def tv. It's a pretty annoying problem that reared its head when Apple released that awesome retina display.
您的设备的像素实际上比它宣传的要多。我的平板电脑的像素比我的台式机显示器和高清电视多。当 Apple 发布令人敬畏的视网膜显示器时，这是一个非常烦人的问题。
The issue is that they wanted to their devices to boast an amazing resolution capability to make images pop ... but if they didn't fudge their numbers a wee bit, a respectable 800px-wide website would only take up half the screen on a ~1600px-wide iPad. And, even if you scale your viewport to the device width, any banner image you have that is 800px is still going to upscaled to 1600px - and there's your blurriness.
问题是他们希望他们的设备拥有惊人的分辨率来使图像流行起来……但是如果他们不捏造数字，一个可观的 800 像素宽的网站在屏幕上只会占据一半的屏幕约 1600 像素宽的 iPad。而且，即使您将视口缩放到设备宽度，您拥有的任何 800 像素的横幅图像仍然会被放大到 1600 像素 - 这就是模糊。
So, you need to create different images for different resolutions and serving with media queries, unless you want to waste your user's bandwidth. I feel your pain, but image generation tools help - all the photo manipulation software packages are equipped to do that.
因此，除非您想浪费用户的带宽，否则您需要为不同的分辨率创建不同的图像并使用媒体查询服务。我觉得你很痛苦，但图像生成工具有帮助——所有的照片处理软件包都可以做到这一点。
I haven't tested with the Note but I presume that WebKit guidance will apply there as well.
我还没有用 Note 测试过，但我认为 WebKit 指南也适用于那里。
Further reading:
进一步阅读：
http://css-tricks.com/snippets/css/retina-display-media-query/
http://css-tricks.com/snippets/css/retina-display-media-query/
回答by Andrew Moore
Android does target density scaling in order to accommodate the varying screen densities of the Android ecosystem. The Android browser targets a medium screen density by default, trying to emulate the size of elements as if the screen was an MDPI screen.
Android 确实以密度缩放为目标，以适应 Android 生态系统的不同屏幕密度。默认情况下，Android 浏览器以中等屏幕密度为目标，尝试模拟元素的大小，就像屏幕是 MDPI 屏幕一样。
Using this website, you can see that the result of this scaling is that device-widthis 601 pxand device-heightis 880 pxon the Nexus 7. Therefore, it falls within your max-width: 720pxdeclaration and the background appears red.
使用这个网站，你可以看到，这个比例的结果是，device-width是601 px和device-height是880 px对的Nexus 7。因此，它属于你的内max-width: 720px声明和背景显示为红色。
You have to remember that the Viewport Sizeand the Screen Sizeare two different things altogether.
您必须记住，视口大小和屏幕大小完全是两个不同的东西。
If you do not want this behavior, you may add target-densitydpi=device-dpito your <meta name="viewport">tag. This will disable the Android target density scaling: device-widthand device-heightwill report the native screen resolution of the device.
如果您不想要这种行为，您可以添加target-densitydpi=device-dpi到您的<meta name="viewport">标签中。这将禁用Android的目标密度缩放：device-width和device-height将报告设备的原始屏幕分辨率。
More information about Android's target density scaling is available in the Android Developers' Documentation.
有关 Android 目标密度缩放的更多信息，请参阅Android 开发人员文档。
回答by user3618095
Well I tried a lot of different combinations of viewports, background sizes, repeats, positioning, etc. In the end the only way to get a reproducible product of the original was to take my 6x157px image and tile it in PS to be 1920x157px. The height of the bar is set manually to 157. This produced the desired result, a horizontally repeating background image at the same "zoom" as the desktop mode. I further tried bumping up the image again in photoshop to 4000x157px and it displayed the same, all good. I then reverted back to the original 6x157px and guess what, it's still janked. So my guess is that horizontally repeating pattern type images are acting unstable in modern mobile browsers, probably because of some strange zoom/ppi related stuff, and the safest bet is to create a mobile version of these type images which are larger than you need and just clips off the side. Please somebody step in and let me know if I am wrong.
好吧，我尝试了很多不同的视口、背景大小、重复、定位等组合。最后，获得原始产品的可复制产品的唯一方法是将我的 6x157px 图像在 PS 中平铺为 1920x157px。栏的高度手动设置为 157。这产生了所需的结果，在与桌面模式相同的“缩放”下水平重复的背景图像。我进一步尝试在 photoshop 中再次将图像提高到 4000x157px，它显示相同，一切都很好。然后我恢复到原来的 6x157 像素，你猜怎么着，它仍然卡住了。所以我的猜测是水平重复的模式类型图像在现代移动浏览器中表现不稳定，可能是因为一些奇怪的缩放/ppi 相关的东西，最安全的方法是创建这些类型图像的移动版本，这些图像比您需要的要大，并且只是从侧面剪下来。请有人介入，如果我错了，请告诉我。
Here's a little test site I put together for this:
这是我为此整理的一个小测试站点：
http://ghostmounta.in/hotspot/
http://ghostmounta.in/hotspot/
Go ahead in dev tools and change url('img/header_background3.png') to img/header_background.png, and img/header_background2.png to see and example.
继续在开发工具中并将 url('img/header_background3.png') 更改为 img/header_background.png 和 img/header_background2.png 以查看和示例。
