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

Question

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

这个小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>

Run Code Online (Sandbox Code Playgroud)

因此,在桌面浏览器,Android桌面和手机上 - 它运行良好.但在iPad mini上 - 它不是!...结果是 - 背景总是灰色的.所以我的问题是:

为什么这个媒体查询无法在iPad mini上运行...... ??? ...

PS:我知道我也必须使用max-device-width属性,但我有一个很大的理由不去做!...

这个页面的要求是100%宽和高,我决定:

制作横向模式的默认CSS规则;
在横向模式下定义不同宽度的规则;
定义肖像变体,主要依赖于"orientation:portrait",并定义不同的宽度.

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

Answer 1

pes*_*tov 10

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

归档时间：	11 年，11 月前
查看次数：	2679 次
最近记录：	11 年，5 月前