javascript iPhone 4+ 默认为 320 像素的网络应用分辨率，我想使用完整的 640 像素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7864453/
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
iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px
提问by fancy
iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px.
iPhone 4+ 默认为 320 像素的网络应用分辨率，我想使用完整的 640 像素。
Can I change this iPhone 4+ behavior to report real resolution?
我可以更改此 iPhone 4+ 行为以报告真实分辨率吗？
EDIT: So i can use,
编辑：所以我可以使用，
<meta name="viewport" content="width=640" />
but how can I be sure it's an iPhone 4+ before setting this tag?
但是在设置此标签之前，我如何确定它是 iPhone 4+？
回答by Mauvis Ledford
The short answer is: you can check the user-agent and set the meta tag with JavaScript.
简短的回答是：您可以检查用户代理并使用 JavaScript 设置元标记。
The long answer is: don't do that. I was originally pretty confused about this, too, when I started developing for mobiles. The iPhone 4 (and other high-res devices) actually display the same page width as their predecessors. This is probably due to the fact that sites everywhere would look totally small and probably messed up if they did otherwise. There is a difference, though. High-res phones simply display everything at a higher resolution (but the same dimensions).
答案很长：不要那样做。当我开始为手机开发时，我最初也对此感到非常困惑。iPhone 4（和其他高分辨率设备）实际上显示与其前辈相同的页面宽度。这可能是由于这样一个事实，即无处不在的网站看起来非常小，如果不这样做可能会一团糟。不过还是有区别的。高分辨率手机只是以更高分辨率（但尺寸相同）显示所有内容。
This doesn't matter for things like text and background colors but you'll find that images don't look as crisp on an iPhone - that's because they're being resized up. What I do is double the resolution on images, give them fixed with and height to their "non-highres" size, and use -webkit-background-size: 100% 100%;. This way older devices display it like normal, and high-res devices look crisp and nice. The caveat is that this is making your image file size bigger.
这对于文本和背景颜色等内容并不重要，但您会发现图像在 iPhone 上看起来不那么清晰 - 那是因为它们被调整了大小。我所做的是将图像的分辨率加倍，将它们固定为“非高分辨率”大小，并使用-webkit-background-size: 100% 100%;. 通过这种方式，旧设备像正常一样显示它，高分辨率设备看起来清晰漂亮。需要注意的是，这会使您的图像文件变大。
For more information on why a pixel is not always a pixel see this link: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
有关为什么像素不总是像素的更多信息，请参阅此链接：http: //www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
Additionally if you wanted to target high-res devices specifically with CSS. You can use a media query:
此外，如果您想专门使用 CSS 定位高分辨率设备。您可以使用媒体查询：
@media screen and (-webkit-device-pixel-ratio: 2) {
body{
background-color: red;
}
}
