Question

我正在尝试实现响应式网页设计，我设置了这样的视口大小：

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

我认为它会使视口宽度大小与设备的宽度无关。假设拥有720px的三星Galaxy Nexus会使视口大小为720px，但是它会报告视口大小为320px，即半宽大小。

我正在使用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媒体查询匹配的内容？

Answer 1

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

编辑：

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

Answer 2

据我所知，具有高dpi的设备上的浏览器，如galaxy nexus，iphone 4和“new iPad”（ver3）假装他们的视口宽度小于实际分辨率，以便渲染css。这样就可以防止新iPad显示网站的最大版本，专为大于10.1英寸的屏幕设计。

我最近在播客上听到了这个概念。我认为这是shoptalk节目，但我不记得客人（也许是马特侯爵）。