报告的视口大小与预期值不同答案

【问题标题】：Reported viewport size is different from expected value报告的视口大小与预期值不同
【发布时间】：2012-07-12 13:45:42
【问题描述】：

我正在尝试实现响应式网页设计，并且我已将视口大小设置为：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

我认为它会使视口宽度大小与设备的宽度无关。假设一个具有 720 像素的三星 Galaxy Nexus 会生成一个 720 像素的视口大小，但它报告的视口大小是 320 像素，即半宽大小。

我正在使用 CSS 媒体查询，我检查了 alert($(window).width());

它使用这个：

<link href="css/mobile-medium.css" media="all and (min-width: 320px) and (max-width: 479px)" rel="stylesheet" type="text/css" />

而不是这个：

<link href="css/mobile-large.css" media="all and (min-width: 480px) and (max-width: 767px)" rel="stylesheet" type="text/css" />

我不明白为什么会这样！？在其他 Android 设备以及 iPhone 4(S) 上也会发生同样的情况。

当它报告的大小完全不同时，您将如何理解与不同 css 媒体查询匹配的内容？

【问题讨论】：

【解决方案1】：

该问题可能是由较高的像素密度（-webkit-min-device-pixel-ratio 属性）引起的，可以按照此处的建议进行处理：Media queries in CSS

编辑：

此链接可以提供一些见解，但老实说，我现在在这里超出了我的深度：http://menacingcloud.com/?c=highPixelDensityDisplays

【讨论】：

【解决方案2】：

据我了解，具有高 dpi 的设备上的浏览器（如 Galaxy nexus、iphone 4 和“新 iPad”（ver3））为了渲染 css 而假装它们的视口宽度小于它们的实际分辨率。这可以防止像新 iPad 那样显示最大版本的网站，该版本是为大于 10.1 英寸的屏幕而设计的。

我最近在一个播客上听到了这个概念。我认为是商店脱口秀，但我不记得客人（也许是马特侯爵）。

【讨论】：