元视口标签和 CSS 媒体查询答案

【问题标题】：Meta viewport tag and css media queries元视口标签和 CSS 媒体查询
【发布时间】：2022-02-13 02:07:05
【问题描述】：

我在使用元视口标签时遇到了 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 媒体查询没有按应有的方式检测到它。

非常感谢任何帮助:)

【问题讨论】：

顺便说一句，“user-scalable=0”不应该是“user-scalable=no”吗？也许两者都有效，但我一直使用“user-scalable=no”。
它没有帮助，你也可以使用 0 或 no 来进行用户可扩展

标签： html css ipad safari viewport

【解决方案1】：

（在 cmets 或编辑中回答。见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 中测试它...

【讨论】：