方向媒体查询不适用于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

回答

相关问题