width、device-width和viewport

最新推荐文章于 2024-08-15 15:48:21 发布

ljxqsq

最新推荐文章于 2024-08-15 15:48:21 发布

阅读量1.7k

点赞数

分类专栏：移动Web网站

移动Web网站专栏收录该内容

12 篇文章 0 订阅

订阅专栏

媒体查询的一个最容易混淆的方面或许就是width和height与添加了前缀device-的类似值之间的区别。对于桌面和平板计算机，它们之间的区别很容易理解：width和height指浏览器视区的尺寸，而device-width和device-height指显示器的尺寸。不是每个人都会全屏运行他或她的浏览器，所以width和height是您需要使用的度量方法。

移动浏览器将填满可用的屏幕，所以您可能期望width和device-width是相同的。不幸的是，并不总是这样。大多数智能电话（包括Android、iPhone和Windows Phone 7）将width设置为大约1,000像素宽的标称视区（在iPhone和iPod touch中，它为980像素；Windows Phone 7使用1024像素）。图4展示了iPod touch通常如何显示前面插图中的示例页面。

图4. 默认情况下，现代移动设备会缩放网页来适合所估计的视区。

即使附加到页面上的样式表使用媒体查询，依据min-width和max-width的值来提供不同样式，iPod touch会忽略这些样式并显示桌面版本，因为它的视区被视为980像素宽。

更让人混淆的是，iPhone、iPod touch和iPad在计算宽度时不会考虑方向，而其他设备会。

幸运的是，这种混淆情形有一个简单的解决方案。苹果公司设计了一个新的<meta>标记，它已被其他移动设备制造商广泛采用，已合并到可能会被万维网联盟（W3C）批准的规范中。要为支持媒体查询的所有设备提供公平的机会，只需向每个网页的<head>添加以下这行代码：

<meta name="viewport" content="width=device-width, initial-scale=1">

这告诉移动设备，将视区视为具有设备的物理宽度相同的宽度。而且，它还告诉iPhone、iPod touch和iPad在计算宽度时考虑方向。这样，您可以在媒体查询中安全地使用width，因为您知道它的用途与您所想的相同。

注意：许多移动设备（最显著的就是iPhone 4和iPad 2）拥有高分辨率的显示屏，具有比桌面或平板显示器高得多的像素密度。这不会影响您在CSS中计算像素大小的方式。CSS规范要求，如果输出设备的像素密度与典型计算机显示器的像素密度差别巨大，浏览器应该重新调节像素值。一些开发人员现在将像素度量方法称为CSS像素。