相关疑难解决方法(0)

如何在CSS媒体查询中说"height <width"？

这是我尝试过的代码:

@media screen and (max-height:450px) and (height<width){
    .hero-text-box{
        margin-top:25px !important;
    }
}

Run Code Online (Sandbox Code Playgroud)

html css css3

And*_*ken

lucky-day

7
推荐指数

3
解决办法

4474
查看次数

定向媒体查询无法在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%宽和高,我决定: