我有与中继检视区标记一起使用CSS媒体查询的一个问题。我在做iPad的web应用程序,将主屏上独立的视图中工作。
这是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媒体查询不会检测到它,因为它应该。
任何帮助是极大的赞赏 :)
(回答评论或编辑。见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测试...