中继检视区标记和CSS媒体查询

问题描述 投票:1回答:1

我有与中继检视区标记一起使用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媒体查询不会检测到它,因为它应该。

任何帮助是极大的赞赏 :)

html css ipad safari viewport
1个回答
0
投票

(回答评论或编辑。见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测试...

© www.soinside.com 2019 - 2024. All rights reserved.