方向媒體查詢不適用於iPad mini

這個小的HTML代碼非常清楚地代表了我的HTML5頁面。方向媒體查詢不適用於iPad mini

<!DOCTYPE html> 
<html> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
     <title>Pebble Go</title> 
     <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" /> 
    </head> 
    <body> 
     <style> 
      @media only screen and (orientation: portrait) { 
       html, body { 
        background: #222; 
       } 
      } 
      @media only screen and (orientation: landscape) { 
       html, body { 
        background: #000; 
       } 
      } 
     </style> 
    </body> 
</html>

所以，在桌面瀏覽器，Android桌子和手機上 - 它工作正常。但在iPad mini上 - 它不是！ ...結果是 - 背景總是灰色的。所以我的問題是：

爲什麼此媒體查詢不適用於iPad mini ...？ ...

PS：我知道我必須使用最大設備寬度屬性，但我有一個很大的理由不這樣做！ ...

該頁面的要求是100％的寬和高，我決定：

使景觀模式的默認CSS規則;
定義橫向模式下不同寬度的規則;
定義肖像變體，基本上依靠「orientation：portrait」，並定義不同的寬度。

我做到了！它正在工作！ ...除了iPad mini！ ...如果我使用最大設備寬度或類似的東西 - 那麼我將處於必須爲景觀編寫不同規則的情況 - 不同的寬度，縱向模式 - 不同的寬度，然後移動設備 - 風景和肖像...... !!! ...。

來源

2013-11-25 pesho hristov

該問題似乎是由視口的元標記中的子句引起的，更具體地說是：「height = device-height」。刪除它使一切工作正常:) ...

來源

2013-11-28 16:46:36

我知道這是一段時間後，但發現這真的救了我！不能爲我的生活弄清楚它！謝謝一堆！ –

沒問題:) ...我知道這很蹩腳：D ...但我決定分享它...顯然這是一個好主意;） –

方向媒體查詢不適用於iPad mini

回答

相關問題