Как судить
Мобильные устройства предоставляют два объекта, один атрибут и одно событие:
(1) window.orientation принадлежит предыдущему атрибуту окна объекта; Существует три значения: 0 -портрет, 90 переворачивается влево и поворачивается в режим ландшафта, -90 перевернута вправо и поворачивается в режим ландшафта, а последний 180 -это инвертировано устройство вниз или вертикально.
(2) Ориентация change - это событие, которое запустит это событие, когда устройство вращается, как и событие RESIZE, используемое на ПК.
Когда эти два используются вместе, легко получить горизонтальный и вертикальный экран состояния устройства. Код заключается в следующем:
(function () {var init = function () {var updateOratation = function () {var orientation = window.orientation; switch (Orientation) {case 90: case -90: Orientation = 'Landscape'; Break; default: Orientation = 'Portrait';} // Делать что -то // Например, добавить состояние к тег HTM document.parentnode.setattribute ('class', ориентация);В CSS вы можете написать таким образом:
/** Performance Div Border показывает синий **/.. Портретное тело div {граница: 1px твердый синий;}/** Производительность Div Border показывает желтый **/. Ландшафтный корпус div {border: 1px твердый желтый;}Конечно, вы также можете использовать медиа -запросы (рекомендуется):
@Media All и (Ориентация: портрет) {Body Div {Border: 1px Solid Blue; }}@Media All и (Ориентация: Ландшафт) {Body Div {Border: 1px твердый желтый; }}совместимость
Как справиться с ситуацией, когда window.orientation или OrientationChange не существует в устройстве? (Обычно одно не существует, другого не существует, иначе)
В ранней разработке часто используется режим модели устройства Chrome, но этого свойства не существует, так как я могу получить это значение? Простой метод состоит в том, чтобы судить на основе сравнения ширины и высоты. Если ширина меньше высоты, это вертикальный экран, а ширина и высота - горизонтальный экран.
Я знаю, как получить результат. Следующее, как прослушать события отмены устройства. Поскольку ориентация нет доступна, используйте самое основное событие изменения размера или используйте таймер для его обнаружения. Пожалуйста, посмотрите на код:
(function () {var updateoratation = function () {var orientation = (window.innerwidth> window.innerheight)? resize Event Window.AddeventListener ('resize', Updateoration, false);Наконец, объединение двух вышеупомянутых методов является полным решением для обнаружения
(function () {var prongementation = (typeof window.orientation === 'number' && typeof window.onorientationChange === 'object'); var init = function () {var htmlnode = document.body.parentnode, ориентация; var updateortation = function () {if -sectureNatation) {ориентация = window. windation; -90: Window.AddeventListener ('OrientationChange', Updateoration, false);Суммировать
Используйте событие OrientationChange, чтобы контролировать, вращается ли устройство, и используйте свойство window.orientation, чтобы определить, является ли оно в настоящее время горизонтальным или вертикальным экраном, чтобы выполнить различные операции.