1

我对与元视口标签一起使用的 CSS 媒体查询有疑问。我正在制作 iPad webapp，它将在主屏幕上的独立视图中工作。

这是CSS：

.header_portrait {

    position: relative;
    top: 0px;
    left: 0px;
    background: #ccc;
    width: 1536px;
    height: 219px;

}

.header_landscape {

    position: relative;
    top: 0px;
    left: 0px;
    background: #fff;
    width: 1536px;
    height: 219px;

}

@media only screen and (max-device-width: 1024px) and (orientation:portrait) { 
    .header_landscape { display: none; }
}
@media only screen and (max-device-width: 1024px) and (orientation:landscape) { 
    .header_portrait { display: none; }
}

这是 HTML 的一部分<head>：

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />
<meta name="apple-mobile-web-app-capable" content="yes">

这是 HTML 的一部分<body>：

<div class="header_portrait" ontouchmove="togle_touch('disable');">

</div>
<div class="header_landscape" ontouchmove="togle_touch('disable');">

</div>

如果我从头部方向检测中删除元视口标签工作正常。似乎视口弄乱了 max-device-width ，因此 CSS 媒体查询没有按应有的方式检测到它。

任何帮助是极大的赞赏 ：）

4

1 回答 1

0

（在评论或编辑中回答。请参阅没有答案的问题，但问题在评论中解决（或在聊天中扩展））

OP写道：

我已经解决了这个问题！

只需更换：

<meta id="viewport" name="viewport" content="user-scalable=0, width=device-width, height=device-height, initial-scale=0.5, maximum-scale=0.5" />

和：

<meta name="viewport" content="width=device-width, maximum-scale=0.5" />

它现在运行良好，在 iPad 3 中我必须在 iPad 1 和 2 中测试它......

于 2015-01-26T14:27:27.400 回答