為什么我的iPhone不能說出960px和640px樣式表之間的區別

Question

我有這兩條規則：

<link rel="stylesheet" media="screen and (max-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">

它們在我的瀏覽器上工作（當我調整瀏覽器寬度時）但是當我在我的iPhone上檢查它們時，無論是縱向還是橫向，它都會加載兩個樣式表。

為什么在橫向視圖中加載640px樣式表？

Answer 1

對於兩種顯示類型，iPhone Safari瀏覽器的Web視圖大小為320x480px或480x320px。 所以網絡開發人員不需要為Non-Retina和Retina Displays重新調整他的CSS。

僅適用於Retina Display

<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" type="text/css" href="../iphone4.css" />

在您的情況下，第二個樣式表被加載，因為在兩種情況下（320或480px）您的Web視圖都低於640px。

我建議使用方向作為css媒體查詢你的情況。

Answer 2

將其添加到HTML文檔的head ：

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

Answer 3

寫max-device-width而不是max-width

<link rel="stylesheet" media="screen and (max-device-width:960px)" type="text/css" href="css/mobileStyles.css">
<link rel="stylesheet" media="screen and (max-device-width:640px)" type="text/css" href="css/mobilePortraitStyles.css">

此外，如果您定義這樣的orientation更好：

<link rel="stylesheet" media="screen and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="landscape.css">