В моем файле CSS я определил следующий селектор мультимедиа:
@media screen and (min-width: 600px) and (orientation: landscape),
screen and (orientation: landscape)
Кажется, что это нормально работает:
Настольная версия Chrome (v32 в моем случае) переключается с ландшафта на potrait, когда окно браузера изменяется ниже определенной ширины.
У меня создалось впечатление, что настольные браузеры всегда были пейзажами...
Есть ли способ предотвратить использование Chrome?
В итоге я придумал альтернативное решение, которое полностью удаляет 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)
Ориентацию можно было бы определить, сравнивая высоту с шириной. Когда width
окна меньше его height
, ориентация будет считаться портретом.
Вы можете рассмотреть возможность использования deviceorientation
для точного обнаружения.
Эта демонстрация иллюстрирует изменение от landscape
к portrait
с использованием ориентации CSS, когда высота окна выше его ширины. http://demo.hongkiat.com/css-orientation-styles/
width < height
окнаwidth < height
он предполагает книжную ориентацию, что является очень противоречивым поведением по сравнению с другими основными браузерами. Я не слежу за вашим предложениемdeviceorientation
так как не могу найти никакой документации по этому вопросу. Возможно, это свойство JavaScript?