Question

我正在努力让我的网站在不同的移动设备上工作，而且我遇到了一些设备宽度问题。我知道之前已经问过这样的问题，但是我在这里和其他地方都读到了相互矛盾的事情，并没有找到任何能够澄清我正在寻找的东西。

假设我正在使用分辨率为480x800的Nexus One。现在，如果制作一个元标记，如：

<meta name="viewport" content="width=device-width">

如果是纵向，则视口宽度为320px，如果是横向，则视口宽度为533px。这是有道理的，因为逻辑分辨率为320x533。但是，当我进行媒体查询时：

@media only screen and (max-device-width: 320px) {
    /*CSS rules here */
}

设备宽度是指物理分辨率，不会根据方向而改变。因此，对于Nexus One，设备宽度为480px，无论方向如何，因此不包含在媒体查询中。

这是正常行为吗？如果是，为什么设备宽度在两者之间的表现如此不同？他们不仅使用不同的值，而且其中一个根据方向而改变，而另一个则不然。这是非常令人困惑的，并且使事情变得更糟，我已经阅读了完全相反的信息（媒体查询设备宽度受方向和元标记设备宽度不受影响）网络上的其他地方。

非常感谢任何帮助澄清。

Answer 1

“设备宽度”媒体功能描述了输出设备渲染表面的宽度。对于连续介质，这是屏幕的宽度。对于分页媒体，这是页面大小的宽度。

我不是移动网页设计方面的专家，但我认为方向不会影响设备宽度值。