Question

这个小HTML代码非常清晰地代表了我的HTML5页面。

<!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：我知道我必须使用max-device-width属性，但我有一个很大的理由不去做！ ......

此页面的要求是100％宽和高，我决定：

制作横向模式的默认CSS规则;
在横向模式下定义不同宽度的规则;
定义肖像变体，主要依赖于“orientation：portrait”，并定义不同的宽度。

我做到了！它的工作原理！ ...除了迷你iPad！ ...如果我使用max-device-width或类似的东西 - 那么我将处于一种情况，我将不得不为景观编写不同的规则 - 不同的宽度，纵向模式 - 不同的宽度，然后移动设备 - 景观和肖像...... !!! ...。

Answer 1

问题似乎是由视口的元标记中的子句引起的，更具体地说：“height = device-height”。删除它使一切正常:) ...

定向媒体查询无法在iPad mini上运行

1 个答案: