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

Question

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

我可以更改此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;
  }
}