iPhone上的CSS媒体查询

Question

我正在构建适用于iPhone，iPad，Android和BlackBerry的应用程序。该应用程序只需要以纵向模式工作（即，如果您以横向方向旋转移动设备，则不会发生任何事情）。应用程序必须根据分辨率显示不同的内容：

• 如果屏幕宽度为＆lt; = 240px：微模式（主要用于BlackBerry）
• 否则，如果屏幕宽度<= 480px：小模式（适用于普通移动设备）
• 否则，如果屏幕宽度<= 767px：中等模式（适用于iPhone 4 +等高分辨率移动设备）
• 否则（屏幕宽度> = 768px）：大模式（适用于平板电脑）

尝试在浏览器上调整窗口大小时，一切正常，所有元素都会根据视口大小调整大小并重新定位。我面临的唯一问题是iPhone 4（可能在iPhone 4S和iPhone 5上会发生同样的事情）。实际上，尽管屏幕宽度为640px，但它使用的是小模式而不是中模式。我按以下方式指定了视口元素：

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />

有人知道为什么会发生这种情况以及如何解决这个问题吗？

非常感谢。

Answer 1

iPhone的宽度为320 CSS像素，可从640个设备像素缩放。

您可以按设备像素比率进行过滤：2，如果您需要以非视网膜版本的方式处理它。