iOS 7中的媒體查詢無法正常工作

我正在使用一些針對iPad和iPhone的橫向和縱向媒體查詢，但從iOS 7開始，它們不再工作。不過，他們在iOS 6中完美工作。有沒有人有類似的經歷？iOS 7中的媒體查詢無法正常工作

下面是我使用的代碼的一部分：

<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>

來源

2013-09-23 user2607261

下面是我遇到問題的網站：http://story-architect.com/?p=1614 – user2607261

同樣在這裏，仍然在尋找答案。 –

你能粘貼您要使用，實現了iPad只選擇媒體查詢。我遇到了同樣的問題，但注意到我偶然添加了文本，導致我的某個查詢無法正確關閉。確保您的iPad查詢之前，您的所有媒體查詢和媒體資源都已關閉。以下是我用來確定iPad和方向的兩個查詢的示例：

@media僅屏幕和（最小設備寬度：768px）和（最大設備寬度：1024px）和（方向：縱向） {}

或

@media只有屏幕和（最小 - 設備寬度：768px）和（MAX-設備寬度：1,024）和（方向：橫向）{}

我已經使用這些關於我創建的多個響應式設計，並且它們在iOS6和iOS7上都能正常工作。再次，只是檢查你的代碼。可能是你俯視的東西很簡單。希望這可以幫助。

來源

2013-09-30 20:48:33

謝謝你分享你的想法。您可以訪問http://story-architect.com/?p=1614並向下滾動並下載我正在使用的CSS。 – user2607261

這些問題是iPhone 5媒體查詢的結果。現在正在進行修復。 –

固定。調整後的代碼可以在這裏找到。 http://jsfiddle.net/Kvieira90/sb985/ –

我遇到了同樣的問題。我的元標籤按要求。

/*電話畫像*/ @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）和（取向：橫向）;

來源

2013-09-30 21:04:08

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

請確保您的html代碼包含此行。

來源

2013-10-03 16:12:50 gizem

改爲使用長寬比和設備長寬比。防彈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-06 16:28:39 sdesapio

關於此問題的警告：這會阻止對除上面列出的任何內容（例如Android設備，小型瀏覽器窗口）以外的任何其他響應。 – warchinal

在我的情況，問題與物業的meta標籤視口：身高=設備高度不知道我爲什麼要規定它。也許我打破了我的項目中的其他東西..

刪除它，方向開始再次在ios上工作。

來源

2014-06-20 14:08:35

iOS 7中的媒體查詢無法正常工作

回答

相關問題