gpt4 book ai didi

html - 元视口(viewport)标签和 css 媒体查询

转载 作者:太空宇宙 更新时间:2023-11-03 18:55:55 24 4
gpt4 key购买 nike

我在将 CSS 媒体查询与元视口(viewport)标记一起使用时遇到问题。我正在制作可在主屏幕上的独立 View 中运行的 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>

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

非常感谢任何帮助:)

最佳答案

(在评论或编辑中回答。参见 Question with no answers, but issue solved in the comments (or extended in chat) )

OP 写道:

I have solved this!

Just replace:

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

With:

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

It works well for now and in iPad 3 I must test it in iPad 1 and 2...

关于html - 元视口(viewport)标签和 css 媒体查询,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13495106/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com