javascript - iPhone 4+ 默认为 320 像素的网络应用程序分辨率，我想使用完整的 640 像素

Question

iPhone 4+ 默认为 320 像素的网络应用程序分辨率，我想使用完整的 640 像素。

我可以更改此 iPhone 4+ 行为以报告真实分辨率吗？

编辑:所以我可以使用，

<meta name="viewport" content="width=640" /> 

但是在设置这个标签之前我如何确定它是 iPhone 4+ 呢？

Answer 1

简短的回答是:您可以检查用户代理并使用 JavaScript 设置元标记。

长答案是:不要那样做。当我开始为手机开发时，我最初对此也很困惑。 iPhone 4(和其他高分辨率设备)实际上显示的页面宽度与其前身相同。这可能是因为任何地方的网站看起来都非常小，否则可能会搞砸。不过还是有区别的。高分辨率手机只是以更高的分辨率(但尺寸相同)显示所有内容。

这对于文本和背景颜色等内容无关紧要，但您会发现图像在 iPhone 上看起来不那么清晰 - 这是因为它们正在调整大小。我所做的是将图像的分辨率加倍，将它们的高度固定为“非高分辨率”大小，并使用 -webkit-background-size: 100% 100%;。通过这种方式，较旧的设备可以正常显示它，而高分辨率设备看起来清晰漂亮。需要注意的是，这会使您的图像文件变大。

有关为什么像素不总是像素的更多信息，请参阅此链接: http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html

此外，如果您想使用 CSS 专门针对高分辨率设备。您可以使用媒体查询:

@media screen and (-webkit-device-pixel-ratio: 2) { 
  body{
     background-color: red;
  }
}