Запросы для СМИ в 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 only screen и (min-device-width: 768px) и (max-device-width: 1024px) и (ориентация: портрет) {}

или

@media только экран и (мин-устройства-ширина: 768px) и (макс-устройства ширина: 1024px) и (ориентация: пейзаж) {}

Я использовал это на нескольких адаптивных конструкциях, которые я создал, и они работают правильно как на iOS6, так и на iOS7. Опять же, просто проверьте свой код. Может быть, вы пропустите что-то очень простое. Надеюсь это поможет.

Answer 2

У меня такая же проблема. мои метатеги по запросу.

/* телефон-портрет */ @import URL ("телефон-portrait.css") только экран и (мин-ширина: 320px) и (макс-ширина: 568px) и (ориентация: портрет);

/* phone4 -landscape */ @import URL ('телефон-landscapeFour.css') только экран и (мин-ширина: 321px) и (макс-ширина: 480px) и (ориентация: ландшафтной);

/* phone5 -landscape */ @import URL ('телефон-landscapeFive.css') только экран и (мин-ширина: 481px) и (макс-ширина: 568px) и (ориентация: ландшафтной);

/* ---------- Таблетки ---------- */ @import url ("tablet.css") только экран и (мин-ширина: 569px) и (max-width: 1024px) и (ориентация: портрет);

@import URL ('планшет-landscape.css') только экран и (мин-ширина: 569px) и (макс-ширина: 1024px) и (ориентация: пейзаж);

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

В моем случае проблема была в мета-тег видовом со свойством: высота = высота устройства Не знаю, почему я определил его. Возможно, я сломал что-то еще в моем проекте.

Сняв его, ориентация снова начала работать на ios.