元视口标记和 css 媒体查询

我在使用 CSS 媒体查询和元视口标签时遇到问题。我正在制作iPad网络应用程序，它将在主屏幕上的独立视图中工作。

这是 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>

如果我从头部方向检测中删除元视口标签可以正常工作。似乎视口弄乱了最大设备宽度，因此 CSS 媒体查询无法检测到它。

任何帮助都非常感谢:)

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

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 中对其进行测试......

相关内容

最新更新

热门标签：