移动分辨率和 CSS 纵横比

Question

我正在使用 RWD 构建 Web 应用程序。我已经为不同的分辨率编写了媒体查询，比如 1024、768 和 320。

我使用下面的元标记来决定页面宽度

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

设备很少，例如iPhone 5 分辨率 - 1136×640。当我在 iPhone 中打开我的网页时，它以横向模式显示 320 布局，因为它的分辨率显示它的 1136 像素宽。

我知道它的 CSS 像素比为 2，但不确定 CSS 像素比、媒体查询宽度和设备分辨率计算之间的逻辑。

是否有任何文章或链接可以解释这一点，并说明为什么它会为 iPhone 显示 320 布局。

提前致谢。

Answer 1

尝试改用这个元声明：

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