iPhone上的CSS媒體查詢

Question

我正在爲iPhone，iPad，Android和BlackBerry構建應用程序。該應用程序只能以縱向模式工作（即，如果您以橫向旋轉移動設備，則不會發生任何事情）。該應用程序能夠顯示不同取決於分辨率：

• 如果屏幕寬度爲< = 240像素：微模式（主要用於黑莓）
• 否則，如果屏幕寬度爲< = 480像素：小模式（用於正常RES移動設備）
• 否則，如果屏幕寬度爲< = 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進行過濾。