我正在为 iPhone、iPad、Android 和 BlackBerry 构建应用程序。该应用程序只需要在纵向模式下工作(即，如果您将移动设备横向旋转，则什么也不会发生)。应用必须根据分辨率显示不同:
- 如果屏幕宽度 <= 240px:微型模式(主要用于黑莓手机)
- 否则，如果屏幕宽度 <= 480px:小模式(对于普通分辨率移动设备)
- 否则，如果屏幕宽度 <= 767px:中等模式(适用于 iPhone 4+ 等高分辨率移动设备)
- 否则(屏幕宽度 >= 768px):大模式(适用于平板电脑)
尝试在我的浏览器上调整窗口大小时一切正常，所有元素都根据视口(viewport)大小正确调整大小和重新定位。我面临的唯一问题是 iPhone 4(iPhone 4S 和 iPhone 5 可能会发生同样的事情)。事实上，尽管它的屏幕宽度是 640px，但它使用的是小模式而不是中模式。我通过以下方式指定视口(viewport)元:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
有人知道为什么会发生这种情况以及如何解决吗？
非常感谢。
最佳答案
iPhone 的宽度为 320 CSS 像素，是从 640 设备像素缩放而来的。
如果您需要以不同于非视网膜版本的方式处理它，您可以按 device-pixel-ratio:2 进行过滤。
关于iphone - iPhone 上的 CSS 媒体查询，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/13581312/