ориентация клавиатуры и медиа-ошибка запроса (режим приложения)

Добавить эту страницу в свой iOS7 домашнем экране
Открыть его, и фокус на поле ввода (клавиатура выскакивает)
текста становится красным, как телефон считает, что он находится в ландшафтном режиме

Есть ли какой-нибудь способ? Или мы просто обвиняем Apple?ориентация клавиатуры и медиа-ошибка запроса (режим приложения)

Примечание. Эта проблема возникает только в режиме приложения, а не в обычном режиме просмотра Safari. И он отлично работал в iOS6.

Код:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 

<style> 
body { 
    color: blue; 
} 
@media (orientation:landscape) { 
    body { 
     color: red; 
    } 
} 
</style> 

<body> 
    <h3>this text will go red when in landscape</h3> 
    <input type="text" /> 
</body>

источник

2013-10-10 Frexuz

innerHeight теперь зависит от клавиатуры будучи в iOS7. Если вы проверите innerHeight против innerWidth с клавиатурой вверх, когда устройство находится на портрете, вы обнаружите, что innerHeight < innerWidth, поэтому, возможно, ориентация на просмотр браузера так же проста, как и вместо ориентации устройства прямо вверх.

источник

2013-10-10 20:54:58 user2868793

Это явно ошибка iOS7. В моем приложении я обнаружил, что я могу достоверно отличить портретный режим из режима ландшафта даже при фокусировке на поле ввода с экранной клавиатурой открыта с помощью этого медиа-запроса:

@media only screen and (device-width: 768px) and (device-height: 1024px) and 
    (min-aspect-ratio: 4/3) { 
    /* landscape differences here */ 
}

я не мог использовать ориентацию: пейзаж, так как правило будет активировано даже в портретном режиме, если клавиатура открыта.

Мне, вероятно, нужно другое правило для iPhone, но я еще так далеко не получил.

источник

2013-10-25 15:52:50 GaryBishop

Ошибка ориентации на клавиатуре также влияет на некоторые веб-браузеры, а не только на режим приложения, но, надеюсь, это может быть использовано в любом случае. Также, похоже, некоторые устройства Android работают.

Вот как я получил вокруг него для мобильных веб-браузеров:

@media only screen and (min-device-aspect-ratio:1/1) and 
         (max-device-aspect-ratio:3/2) { 
/* Landscape-to-portrait corrections here */ 
}

Идея заключается в том, что этот запрос может стрелять только если экран либо совершенный квадрат или близко к площади, сценарий, который в значительной степени только происходит, когда клавиатура поднята на сенсорных устройствах. Значения коэффициента сжатия, которые я использовал, переводятся между 1 и 1,5, так что пример экрана 16: 9 имеет соотношение сторон 1,7777778 (16/9) и не будет нацелен. После срабатывания MQ вы можете повторно нарисовать обработанные элементы. Это не исправляет ошибку, она просто скрывает ее.

Если ОС не содержит ошибки, этот запрос никогда не будет срабатывать, поэтому, если Apple исправляет это, вам не нужно менять код, если вы этого не хотите.

Если устройство действительно перевернуто в ландшафтном режиме, соотношение сторон только увеличивается и даже больше, если клавиатура поднята, поэтому ошибка не должна появляться, когда устройство находится на боку.

Насколько я знаю, нет устройств с квадратными/почти квадратными экранами, которые подберут этот медиа-запрос (на момент написания), но, пожалуйста, поправьте меня, если я ошибаюсь.

Это было протестировано на iPhone 5 в браузерах Safari, Dolphin и Mercury под управлением iOS7, а в Chrome на Android One X под управлением Android 4.2.1 (который также испытывает ту же ошибку с ошибкой ошибок с клавиатурами).

Я также проверил, будет ли он срабатывать на Blackberry Bold 9780 (480x360), и это не так. Я не совсем этому доверяю, поскольку разрешение должно было сделать его попадающим в целевой диапазон, и он загрузил другие MQ просто отлично, поэтому, возможно, он оценивает соотношение сторон, основанное на физическом размере экрана, а не на количестве пикселей , Это потенциально экземпляр, в котором медиа-запрос применяет ваше решение к ошибке на экране, который не испытывает ошибку.

Это не идеальный вариант, но он вызвал у меня проблемы после многих головных болей.

источник

2013-11-13 03:10:52 Timmah

ориентация клавиатуры и медиа-ошибка запроса (режим приложения)

ответ

Смежные вопросы