在iOS的7媒体查询不工作(Media queries in iOS 7 not working)

我使用的是一对夫妇的靶向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>

Answer 1:

你能粘贴您要使用，实现了iPad只选择媒体查询。我有同样的问题，但我们注意到，我曾偶然的引起了我的查询一个无法正常关闭添加的文本。确保所有媒体的查询和性能之前已经将iPad的查询关闭。下面是两个查询我用它来确定iPad和方向的例子：

@media只有屏幕和（最小 - 设备宽度：768px）和（MAX-设备宽度：1,024）和（方向：纵向）{}

要么

@media只有屏幕和（最小 - 设备宽度：768px）和（MAX-设备宽度：1,024）和（方向：横向）{}

我已经使用了这些对我已经创建了多个响应设计，他们在两个iOS6的和iOS7正常工作。同样，只检出你的代码。可能是你忽视的东西很简单。希望这可以帮助。

Answer 2:

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

确保你的HTML代码中包含此行。

Answer 3:

我遇到了同样的问题。我的meta标签的要求。

/ *电话画像* / @import URL（ “电话portrait.css”）仅屏幕和（最小宽度：320像素）和（最大宽度：568px）和（方向：纵向）;

/ * PHONE4 -landscape * / @import URL（ '电话landscapeFour.css'）仅屏幕和（最小宽度：321px）和（最大宽度：480像素）和（方向：横向）;

/ * phone5 -landscape * / @import URL（ '电话landscapeFive.css'）仅屏幕和（最小宽度：481px）和（最大宽度：568px）和（方向：横向）;

/ * ---------- ----------片剂* / @import URL（ “tablet.css”）仅屏幕和（最小宽度：569px）和（最大宽度：1,024）和（方向：纵向）;

@import URL（“片剂landscape.css”）仅屏幕和（最小宽度：569px）和（最大宽度：1,024）和（方向：横向）;

Answer 4:

使用纵横比和设备纵横比来代替。防弹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 */
}