对于网络应用，iPhone 4+默认为320px分辨率，我想使用完整的640px [英] iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px

问题描述

对于网络应用，iPhone 4+默认为320px分辨率，我想使用完整的640px。

iPhone 4+ defaults to 320px resolution for web apps, I want to use the full 640px.

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

Can I change this iPhone 4+ behavior to report real resolution?

编辑：
所以我可以使用，

So i can use,

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

但是在设置此标签之前我怎么能确定它是iPhone 4+？

but how can I be sure it's an iPhone 4+ before setting this tag?

推荐答案

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

The short answer is: you can check the user-agent and set the meta tag with JavaScript.

答案很长：不要这样做。当我开始为移动设备开发时，我最初对此感到非常困惑。 iPhone 4（和其他高分辨率设备）实际上显示与其前辈相同的页面宽度。这可能是因为各地的网站看起来都很小，如果不这样做，可能会搞砸。但是有一点不同。高分辨率手机只需以更高的分辨率（但尺寸相同）显示所有内容。

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上的图像看起来不那么清晰 - 这是因为它们正在重新调整大小。我所做的是将图像的分辨率加倍，将它们固定为非高尺寸，并使用 -webkit-background-size：100％100％; 。这样老设备就像普通设备一样显示它，高分辨率设备看起来很清晰。需要注意的是，这会使您的图像文件变大。

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.

有关像素不一定是像素的原因的详细信息，请参阅此链接：
http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not .html

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

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

Additionally if you wanted to target high-res devices specifically with CSS. You can use a media query:

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

这篇关于对于网络应用，iPhone 4+默认为320px分辨率，我想使用完整的640px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！