1

我正在使用一些针对 iPad 和 iPhone 的横向和纵向媒体查询,但从 iOS 7 开始,它们不再起作用。不过,它们在 iOS 6 中运行良好。有没有人有类似的经历?

这是我正在使用的部分代码:

<style type="text/css">
/* iPad (landscape) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 14pt;
line-height: 104%;
width: 37.5em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 12.25em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 14pt;
line-height: 104%;
padding-left: 6.15em;
width: 22em; }
.info {  
display: none; }}
/* iPad (portrait) */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
.header {
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.action {  
font-family: courier new, monospace;
color: #999999;
font-size: 12pt;
line-height: 104%;
width: 37.15em; }
.character {  
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 12em;
width: 21em; }
.dialogue {
font-family: courier new, monospace;  
color: #999999;
font-size: 12pt;
line-height: 104%;
padding-left: 6em;
width: 22em; }
.info {  
display: none; }}
</style>
4

5 回答 5

6
<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=no" />

确保您的 html 代码包含此行。

于 2013-10-03T16:12:50.773 回答
2

您能否粘贴您尝试用于实现仅 iPad 选择的媒体查询。我遇到了同样的问题,但注意到我意外添加了导致我的一个查询无法正确关闭的文本。确保在 iPad 查询之前已关闭所有媒体查询和属性。下面是我用来确定 iPad 和方向的两个查询的示例:

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {}

或者

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : Landscape){}

我已经在我创建的多个响应式设计中使用了这些,它们在 iOS6 和 iOS7 上都能正常工作。同样,只需检查您的代码。可能是您忽略了一些非常简单的事情。希望这可以帮助。

于 2013-09-30T20:48:33.080 回答
0

我遇到了同样的问题。我的元标记按要求。

/* phone-portrait */ @import url("phone-portrait.css") only screen and (min-width:320px) and (max-width: 568px) and (orientation: portrait);

/* phone4 -landscape*/ @import url('phone-landscapeFour.css') only screen and (min-width:321px) and (max-width: 480px) and (orientation: Landscape);

/* phone5 -landscape*/ @import url('phone-landscapeFive.css') only screen and (min-width:481px) and (max-width: 568px) and (orientation: Landscape);

/* ---------- 平板电脑 ---------- */ @import url("tablet.css") only screen and (min-width: 569px) and (max-width :1024px)和(方向:纵向);

@import url('tablet-landscape.css') 仅屏幕和 (min-width: 569px) and (max-width: 1024px) and (orientation: Landscape);

于 2013-09-30T21:04:08.360 回答
0

请改用纵横比和设备纵横比。防弹 iOS 媒体查询...

/* iPad: portrait */
@media screen and (aspect-ratio: 768/716) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 768/1024) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPad: landscape */
@media screen and (aspect-ratio: 1024/372) and (device-aspect-ratio: 768/1024), screen and (aspect-ratio: 1024/768) and (device-aspect-ratio: 768/1024) {
    /* styles here */
}

/* iPhone 3.5" screen: portrait */
@media screen and (aspect-ratio: 320/220) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 320/480) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 3.5" screen: landscape */
@media screen and (aspect-ratio: 480/114) and (device-aspect-ratio: 320/480), screen and (aspect-ratio: 480/320) and (device-aspect-ratio: 320/480) {
    /* styles here */
}

/* iPhone 4" screen: portrait */
@media screen and (aspect-ratio: 320/308) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 320/568) and (device-aspect-ratio: 320/568) {
    /* styles here */
}

/* iPhone 4" screen: landscape */
@media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
    /* styles here */
}
于 2013-10-06T16:28:39.840 回答
0

就我而言,问题出在带有属性的元标记视口中:height=device-height 不知道我为什么要指定它。也许我在我的项目中破坏了其他东西..

删除它,方向又开始在 ios 上工作。

于 2014-06-20T14:08:35.907 回答