Правила CSS не применяются правильно/полностью

Question

У меня очень странная проблема с домашним html-приложением на ipad. Это довольно сложное одностраничное приложение, которое также загружается для автономного использования с cache.manifest.

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

<link rel="stylesheet" type="text/css" href="css/ebot.css"/> 
<link rel="stylesheet" media="screen and (min-width: 820px)" type="text/css" href="css/ebot-ls.css"/> 
<link rel="stylesheet" media="screen and (max-width: 819px)" type="text/css" href="css/ebot-ss.css"/> 

На высоком уровне HTML выглядит следующим образом:

<div class="parent"> 
    <div id="screen1" class="fullscreen"> 
     ... 
    </div> 
    <div id="screen2" class="fullscreen hidden"> 
     ... 
    </div> 
    <div id="screen3" class="fullscreen hidden"> 
     ... 
    </div> 
</div> 

Класс .hidden определяются как .hidden { display: none; }

Естественно, в каждом из полноэкранных див, есть много других элементов. Когда приложение запускается, отображается screen1, а затем через взаимодействие с пользователем он заменяется либо screen2, либо screen3.

Теперь, когда я запускаю приложение с ipad в портретном режиме, все работает отлично. Если я затем поверну его в ландшафт, все будет хорошо - с новыми правилами стиля, которые применяются правильно.

Когда я запускаю приложение с ipad в ландшафтном режиме, я получаю действительно испорченный экран с screen1, видимым на весь экран, как и должно быть. Тем не менее, поскольку у этого есть прозрачный фон, я могу видеть за его элементами отдельные дочерние элементы как screen2, так и screen3, но без каких-либо из их классов css, применяемых к ним вообще. Кроме того, элементы на видимом экране1 также, как представляется, имеют только некоторые правила CSS, применяемые к ним (например, границы на месте, но шрифты нет).

Если я поворачиваю ipad в портретный режим, а затем обратно в пейзаж, все фиксируется.

Я приложил ipad к моему mac для отладки его из Safari. В отладчике, когда я проверяю элементы, я вижу, что стили применяются правильно, поэтому по всем правилам ни одна из «фоновой глупости» не должна быть видимой. Если в инспекторе в Safari я отключить правило display: none, а затем проверить его снова, то все будет исправлено.

В целом он чувствует/выглядит как CSS применяются только частично при первой загрузке - и только после того, как обновление/перекраска/повторное использование страницы будут применены правильно.

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

Что я могу сделать, чтобы решить эту проблему?

Answer 1

Пробовали ли вы ориентированные медиа-запросы?

<link rel="stylesheet" type="text/css" href="css/ebot.css"/> 
<link rel="stylesheet" media="screen and (min-width: 820px) and (orientation:landscape)" type="text/css" href="css/ebot-ls.css"/> 
<link rel="stylesheet" media="screen and (max-width: 819px) and (orientation:portrait)" type="text/css" href="css/ebot-ss.css"/> 

Check the documentation альтернативы, которые могут помочь.

Кроме того, этот мета тег хорошо служил мне в прошлом с вопросами IPad, такие как эти

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0"> 

Some documentation на окне просмотра мета-тег, чтобы очистить какие-либо сомнения

EDIT:Others have stumbled upon this