iOS 7中的媒体查询无法正常工作

Question

我正在使用一些针对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）和（最大设备宽度：1024px）和（方向：纵向） {}

或

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

我已经使用这些关于我创建的多个响应式设计，并且它们在iOS6和iOS7上都能正常工作。再次，只是检查你的代码。可能是你俯视的东西很简单。希望这可以帮助。

Answer 2

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

/*电话画像*/ @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 ） 和（max-width：1024px） 和（orientation：portrait）;

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

Answer 3

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

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

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

在我的情况，问题与物业的meta标签视口：身高=设备高度 不知道我为什么要规定它。也许我打破了我的项目中的其他东西..

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