iOS Web App In-Call Media Queries

Question

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

Answer 1

Выключается, панель заголовка добавляет дополнительные 20 пикселей. Так что это довольно легко справиться. Вот запросы, если кому-то интересно (это предполагает, что вы используете строку DEFUALT состояния в приложении):

<meta name="apple-mobile-web-app-status-bar-style" content="default" /> 

И запросы СМИ:

/* iPhone 5 */ 
@media screen and (max-height: 548px) {} 

/* iPhone 5 in-call */ 
@media screen and (max-height: 528px) {} 

/* iPhone 4 */ 
@media screen and (max-height: 460px) {} 

/* iPhone 4 in-call */ 
@media screen and (max-height: 440px) {}