Question

我在使用元视口标记时遇到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媒体查询并没有像它应该那样检测到它。

非常感谢任何帮助：）

Answer 1

（在评论或修改中回答。请参阅Question with no answers, but issue solved in the comments (or extended in chat)）

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

元视口标记和css媒体查询

1 个答案: