iOS 7中的媒体查询不起作用

我正在使用一些针对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的唯一select。 我有同样的问题，但注意到我不小心添加了文本，导致我的一个查询不正确closures。 确保您的iPad查询之前，您的所有媒体查询和媒体资源都已closures。 以下是我用来确定iPad和方向的两个查询的示例：

@media只有屏幕和（min-device-width：768px）和（max-device-width：1024px）和（orientation：portrait）{}

要么

@media仅屏幕和（min-device-width：768px）和（max-device-width：1024px）和（orientation：landscape）{}

我已经创build了多个响应式devise，并在iOS6和iOS7上正常工作。 再次，只是检查你的代码。 可能是你俯视的东西很简单。 希望这可以帮助。

Answer 2

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

确保你的html代码包含这一行。

Answer 3

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

/ * phone-portrait * / @import url（“phone-portrait.css”）只有screen和（min-width：320px）和（max-width：568px）和（orientation：portrait）;

/ * phone4 -landscape * / @import url（'phone-landscapeFour.css'）只有屏幕和（min-width：321px）和（max-width：480px）和（orientation：landscape）;

/ * phone5 -landscape * / @import url（'phone-landscapeFive.css'）只有屏幕和（min-width：481px）和（max-width：568px）和（orientation：landscape）;

/ * ———-平板———- * / @import url（“tablet.css”）只有屏幕和（最小宽度：569px）和（最大宽度：1024px）和（orientation：portrait）;

@import url（'tablet-landscape.css'）只有屏幕和（min-width：569px）和（max-width：1024px）和（orientation：landscape）;

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 */ } 

Answer 5

在我的情况下，问题是在元标记视口的属性：高度=设备高度不知道为什么我指定它。 也许我在我的项目中破坏了别的东西

删除它，方向开始再次在ios上工作。