从iPhone 和viewport 标签出现之后的每一代移动设备的分辨率都在增加。现在像素太高,实际像素小到即使用显微镜都难以分辨。如果规范没有改变,当网页的viewport宽度设置为设备宽度时,出现非常微小的用户界面。在iPhone 4 中,即第一个有着高密度显示屏的设备上,这些元素相对它们在老版本的iPhone 上只有一半大小。

此外,苹果公司是第一个将高密度显示屏设备推向市场的制造商。为了让Web 开发者的思维保持清晰,苹果公司决定继续在iPhone 4 上返回320 的设备宽度,尽管屏幕物理像素为640。 安卓设备也如法炮制。这些设备更复杂,因为在如何显示上,它们给了用户更多的控制权。(安卓上的Chrome 有一个不是很有用的target-densitydpi 的viewport 属性来支持它,你可以查看安卓开发者文档来获取更多的相关信息)。

所有的设备都将返回一个设备开发者认为是布局界面元素的理想尺寸的值作为device-width。值有很大不同,所以当我们为一个viewport 宽度为设备宽度的Web页面的布局时,我们需要确保布局方式可以处理一些伸缩问题,就像一个传统桌面站点的流式布局一样。

[infobox style=’regular’ static=’1′]<meta name=”viewport” content=”width=device-width”>[/infobox]

在大多数情况下,这样设置是最好的,因为它允许界面完全适应用户的设备,我们就不必担心网页的宽度会超过设备的宽度。