iPhone上的CSS媒体查询

Question

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

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

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

<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个设备像素缩放。

如果您需要对非视网膜版本进行不同处理，则可以按device-pixel-ratio：2进行过滤。