Используйте носитель, чтобы определить проблему, возникающую в ширине экрана:
На iOS я могу сделать это, когда я поворачиваю экран, но он не ответил на Android. Горизонтальный экран по -прежнему показывает мой вертикальный стиль экрана.
После проверки информации, если носитель CSS3 хочет иметь лучший эффект отображения на мобильной стороне, вам необходимо добавить этот код в заголовок страницы.
<meta name = "viewport" content = "width = width устройства, начальная масштаба = 1,0, максимальная масштаба = 1,0, пользовательский шкалевый = нет">
Но я не могу использовать этот код. Потому что моя страница адаптирована. Размер шрифта и размер стиля могут отображаться в соответствии с размером экрана. Если я добавлю этот код, моя адаптация не сработает. Так что используйте другие методы
Решение:
Мобильное устройство обеспечивает событие: событие OrientationChange
Это событие было добавлено Apple для Safari. Чтобы разработчики могли определить, когда пользователь переключает устройство с ландшафтного представления в режим просмотра портрета.
Это событие будет вызвано, когда устройство вращается.
// прослушивание для ориентации изменение window.addeventListener ("OrientationChange", function () {// объявить новую ориентацию numberert (window.orientation);}, false);Пока пользователь изменяет режим просмотра устройства, событие OrientationChange будет запускается. Объект события в это время не содержит никакой ценной информации.
Потому что единственная соответствующая информация может быть доступна через Window.orientation
Атрибут ориентации
Он имеет три значения: 0,90, -90
0 Портрет, -90 означает, что устройство вращается горизонтально к режиму ландшафта справа, а 90 означает, что устройство вращается горизонтально к режиму ландшафта слева.
Есть еще один, который составляет 180, что означает вертикальный экран, но представляет собой перевернутый вертикальный режим экрана. Но эта модель еще не поддержана.
Как показано на рисунке:
Следовательно, объединяя это событие ориентации и свойство ориентации окна, нам легче определить, находится ли устройство на горизонтальном или вертикальном экране.
(function () {var init = function () {var updateororation = function () {var prioytation = window.orientation; switch (ориентация) {case 90: case -90: Orientation = 'Landscape'; // Вот горизонтальный разрыв; по умолчанию: ориентация = 'портрет'; // здесь версический разрыв; Вертикальный экран //plusportdocument.body.parentnode.setattribute( 'class'1tientation) ;/// Это событие вызывает для каждого вращения.Следовательно, класс может быть добавлен в соответствии с различными состояниями вращения, поэтому наши CSS можно писать так
/** Производительное тело показывает красный **/.
Другой способ написания - использовать медиа -запросы
@Media All и (ориентация: портрет) {body div {founal: red;}} @media all и (ориентация: пейзаж) {body div {founal: blue; }}Этот ориентационный медиа -запрос работает на iOS3.2+ и Android 2.0+.
Относительно говоря, этот код немного более краткий. С приведенным выше JS+CSS этот вид кода является чистым CSS. Когда устройство вращается, CSS, которые изменяют направление, будут вызваны в соответствии с направлением повернутого устройства.
совместимость
Некоторые устройства не предоставляют событие OrientationChange, но не запускают событие изменения размера окна. И если медиа -запросы не поддерживают их, что мы должны делать?
Это может быть оценено по событию Resize. Используйте внутреннюю трупу и внутреннюю часть, чтобы получить размер экрана. Судя по сравнению с шириной и высотой, шириной и высотой - вертикальные экраны, а ширина и высота - горизонтальные экраны.
Код заключается в следующем:
(function () {var updateoratation = function () {var orientation = (window.innerwidth> window.innerheight)? window.addeventlistener ('resize', updateoration, false);}; window.addeventlistener ('domcontentloaded', init, 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: Orientation = 'Landscape'; Break; по умолчанию: Orientation = 'Portrait'; Break;}} else {Orientation = (window.innerwidth> window.innerheight)? 'Portrait';} htmlnode.setattribute ('class', orientation);}; if (persongientation) {window.addeventListener ('OrientationChange', Updateoration, false);} els window.addeventlistener ('resize', updateoration, false);} updateoration ();}; window.addeventListener ('domcontentload', init, false);}) ();Используя этот метод, вы можете решить раздражающее горизонтальное и вертикальное обнаружение экрана мобильных устройств.