最小寬度媒體查詢不工作在iPad上？

爲什麼在橫向模式下在iPad上拾取以下媒體查詢？最小寬度媒體查詢不工作在iPad上？

@media all and (min-device-width: 1000px) { 
    css here 
}

或者

@media all and (min-width: 1000px) { 
    css here 
}

我想這個CSS針對任何瀏覽器是1000像素寬或以上，不只是臺iPad。出於這個原因，id相當適用於最小寬度的第二個選項，如果可能的話不使用min-device-width。這兩個版本在我的電腦上都可以正常使用firefox。感謝

來源

2011-10-11 Evans

在iPad上始終報告其爲768px寬，其作爲1,024像素的高度，所以你必須找出它是如何與orientation旋轉和使用min-device-height:1000px像這樣：

 /* This will apply to all screens with a width 999px and smaller */ 
* { 
    color:green; 
    background-color:black; 
} 

    /* 
     This will apply to all screens larger then 1000px wide 
     including landscape ipad but not portrait ipad. 
     */ 
@media (orientation:landscape) and (min-device-height:1000px), 
     all and (min-width:1000px) { 
    * { 
     color:white; 
     background-color:red; 
    } 
}

結果：

iPad的
- 肖像 - 綠色文本 - 黑色背景
- 景觀 - 白色文本 - 紅色背景
iPhone
- 肖像 - 綠色文本 - 黑背景
- 景觀 - 綠色文本 - 黑色背景
電腦（分辨率）
- 1680×1050 - 白色文本 - 紅色背景
- 800x600的 - 綠色文本 - 黑色背景

使用Chrome &火狐（沒有人甚至使用IE瀏覽器了嗎？）

參考文獻：
w3 media queries
Safari CSS Reference
Optimizing Web Content

來源

2011-10-13 17:58:40 chown

您的代碼和鏈接對我無效。 – Evans

有點煩人的iPad以這種方式工作，但感謝您的答案。 – Evans

@jdln Np。我同意應該有更好的方法來完成這一點。希望未來會有更好的移動設備和平板電腦的CSS標準。 – chown

從http://perishablepress.com/press/2010/10/20/target-iphone-and-ipad-with-css3-media-queries/

/* iPad [portrait + landscape] */ 
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { 
    .selector-01 { margin: 10px; } 
    .selector-02 { margin: 10px; } 
    .selector-03 { margin: 10px; } 
}

它看起來像screen屬性可能是必需的。

來源

2011-10-13 17:47:35

你的代碼可以在ipad上工作，但我想定位其他平板電腦以及超過100px寬的桌面瀏覽器。 – Evans

這聽起來像添加一些JavaScript設備檢測可能是一個更強大的解決方案。我喜歡modernizr與我寫的附加瀏覽器和版本作爲html類的自定義代碼的組合，因此我確切知道我正在處理的是什麼。我只是不相信瀏覽器足以做他們應該做的事情，所以我喜歡在幾分鐘內直接發現瀏覽器的具體問題並直接攻擊它們，而不是試圖找到需要幾小時或幾天的完美解決方案。 –

忘了提及我認爲與JavaScript，你可以追加瀏覽器的寬度和高度作爲自定義類，你可以添加類似.min1000Width。然後，你就可以在沒有媒體查詢的情況下擁有香草CSS，即使是功能最少的瀏覽器也能理解。 –

如果發現了這個新的iPad

@media screen and (orientation:landscape) and (min-device-height:1000px) and (-webkit-min-device-pixel-ratio : 2) { 
    * { 
     color:white; 
     background-color:red; 
    } 
}

來源

2012-10-12 18:15:40 Jeshurun

爲了記錄在案的偉大工程，我不知道爲什麼

@media (min-width: 1000px) { 

/* css here */ 

}

不適合你。自這個問題首次發佈以來，iPad可能會發生什麼變化？

這裏有一個工作示例：
實時取景：http://fiddle.jshell.net/panchroma/Bn4ah/show/
編輯觀點：http://fiddle.jshell.net/panchroma/Bn4ah/

此外，一定要包括

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

在頁面的頭部。

來源

2013-10-10 01:16:33

我試圖用一個簡單的媒體查詢是這樣的： @media只有屏幕和（最小寬度：768px）{ 這裏的CSS} ，但我不會在iPad Pro的10.5' 我是測試觸發我將它增加到900px（用於肖像），它工作得很好，我認爲由於需要補償的視網膜顯示器，它可能在舊的iPad非視網膜上正常工作。

來源

2017-06-27 13:44:51

最小寬度媒體查詢不工作在iPad上？

回答

相關問題