Как запретить Chrome (рабочий стол) активировать книжную ориентацию с помощью мультимедийного селектора?

0

В моем файле CSS я определил следующий селектор мультимедиа:

@media screen and (min-width: 600px) and (orientation: landscape),
       screen and (orientation: landscape)

Кажется, что это нормально работает:

  • Safari (на рабочем столе /iphone/ipad)
  • Firefox (на рабочем столе)
  • Internet Explorer (на рабочем столе)

Настольная версия Chrome (v32 в моем случае) переключается с ландшафта на potrait, когда окно браузера изменяется ниже определенной ширины.

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

Есть ли способ предотвратить использование Chrome?

Теги:
google-chrome

2 ответа

0
Лучший ответ

В итоге я придумал альтернативное решение, которое полностью удаляет orientation из медиа-запроса. Это, конечно, не самое идеальное решение, так как я не могу применять конкретные стили ориентации портрета, но по крайней мере моя страница доступна на всех устройствах, которые я тестировал до сих пор (desktop/iphone/ipad/kindle).

Внутри HTML <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

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

@media screen and (min-width: 600px)
0

Ориентацию можно было бы определить, сравнивая высоту с шириной. Когда width окна меньше его height, ориентация будет считаться портретом.

Вы можете рассмотреть возможность использования deviceorientation для точного обнаружения.

Эта демонстрация иллюстрирует изменение от landscape к portrait с использованием ориентации CSS, когда высота окна выше его ширины. http://demo.hongkiat.com/css-orientation-styles/

  • 0
    Демонстрация, на которую вы ссылаетесь, показывает точную проблему, с которой я столкнулся на своей странице. Но ваше предположение остается верным, когда width < height окна width < height он предполагает книжную ориентацию, что является очень противоречивым поведением по сравнению с другими основными браузерами. Я не слежу за вашим предложением deviceorientation так как не могу найти никакой документации по этому вопросу. Возможно, это свойство JavaScript?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню