我的网页在iPhone4和iPhone4S上显示相同



我有一个移动web应用程序,我使用CSS3/HTML5绘制图形。

在iPhone3G和iPhon3GS上看起来不错,因为它们具有相同的像素比。

然而,当我在iPhone4或iPhone4S上打开相同的网页时,它看起来与iPhone3G完全相同,我们考虑到更好的像素比。

我的问题是:

我可以强制iPhone4设备使用它的像素比而不是iPhone3G像素比?

如果我将图像保存到设备驱动器并在Camera Roll中打开它,我看到了iPhone3G和iPhone4的区别,所以我也希望在web上看到它

事实是iPhone 4的屏幕是326 dpi,是原版iPhone屏幕的两倍。这意味着这款新设备在相同的物理屏幕尺寸下具有两倍的宽度和两倍的高度。这就是为什么苹果决定为其浏览器提供与低dpi设备相同的CSS、视口和JavaScript尺寸,即320x480,并创建像素比为2。这意味着对于每个像素,将绘制四个真实像素(2倍缩放)。因此,你的网站在iPhone 3GS和iPhone 4上的渲染效果是一样的。如果您仍然希望显示高dpi图像,您可以使用媒体查询条件-webkit-min-device-pixel-ratio:

<link media="all and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" type="text/css" rel="stylesheet" />

最新更新