Изменение мобильной ориентации не применяется CSS

я тестирую веб-сайт, который я разрабатываю, и использую медиа-запросы.

когда я тестирую и изменяю размер страницы в браузере, все хорошо.

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

если я загружу страницу в landscape mode, применяются правильные CSS.

когда я меняю на portrait, CSS также верны.

но если я вернусь к landscape, в portrait классы css все еще применяются.

я использую эти метатеги 

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

и в моих медиа-запросах у меня есть

@media 
only screen and (max-width: 610px),
only screen and (max-width: 610px) and (orientation:landscape) { ... }

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

я предупредил ширину устройства, чтобы убедиться, что все в порядке и в landscape режим 598px широкий и portrait is 384px

я использую Nexus 4 (Android 4.3)

Почему CSS не применяются, как только я изменяю ориентацию?

EDIT: Если я загружу сайт в portrait, а затем landscape, CSS не применяются. Это как если бы, как только он идет к наименьшему разрешению,он не может вернуться.

7
css device-orientation media-queries

5 ответов

на моем Nexus 4 у меня есть что-то, что выглядит так и, похоже, работает для ваших тестовых случаев:

<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<meta name='viewport' content='width=device-width'>

и я не ссылаюсь на ориентацию в медиа-запросе, например:

@media only screen and (max-width: 610px) { /* Some CSS here */ }

EDIT: Похоже, вам нужно поместить max-device-width после других материалов max-width с точки зрения медиа-запросов. Цитируя Викса.ca в комментариях ниже...

только что нашел свою проблему. Обратите внимание, как я определяю "max-device-width" перед остальными. Если я поставлю это условие последнее, оно работает. "max-device-width" используется для отображения retina.

4

этот код работал для меня:-

  @media only screen and (min-width: 240px) and (max-width: 520px), only screen and (min-device-width: 240px) and (max-device-width: 520px) and (orientation:portrait)
{
    body
    {
        background:#009;
    }
}

@media only screen and and (max-width: 610px), only screen and (max-device-width: 610px) and (orientation:landscape)
{
    body
    {
        background:#993;
    }
}
2

моя проблема связана с порядком моих запросов CSS.

я использовал для определения 'min-device-width' раньше остальных.

@media
only screen and (min-device-width: 240px) and (max-device-width: 520px),
only screen and (min-width: 240px) and (max-width: 520px) { ... }

но если я определяю его последним, он работает.

@media
   only screen and (min-width: 240px) and (max-width: 520px),
   only screen and (min-device-width: 240px) and (max-device-width: 520px) { ... }

для получения дополнительной информации об устройстве-ширина: -проверить этот вопрос

2

ваш медиа-запросы имеют перекрытие. Max-width 520 также будет истинна max-width 610. Также у вас есть или в ландшафте, поэтому можно быть истинным в портрете, если максимальная ширина 610 истинна. Перекрывающиеся медиа-запросы будут работать как CSS в том, что он каскадирует, так что вы получите странное поведение.

Я не вижу ссылки на orientation: portrait в ваших запросах, так как вы знаете, что применяются портретные классы. Обычно вы хотите сделать это либо или при выполнении ориентации запросы.

также попробуйте добавить min-width, чтобы удалить любое перекрытие ширины

@media only screen and (orientation:landscape) { ... }

@media only screen and (orientation:portrait) { ... }

1

известный сайт quiksmode определяет устройство-ширина / устройство-высота функции СМИ как статический.

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

вот почему, используя max-device-width по-прежнему применяется после изменения ориентации.

1