Не так давно я выполнял проект H5 и нуждался в некоторой обработке, когда изменения горизонтального и вертикального экрана. Нет сомнений в том, что ориентация необходимо использовать для мониторинга изменений горизонтальных и вертикальных экранов.
План 1:
// прослушивание ориентации изменений window.addeventListener ("OrientationChange", function (event) {// Судя по горизонтальным и вертикальным экранам на основе event.orientation | screen.orientation.Anle равен 0 | 180, 90 | -90 градусов}, false);После добавления кода существуют различные проблемы совместимости. Проблемы совместимости возникают здесь, в двух местах:
Ориентация
Event.orientation | Screen.orientation.Angle
Ниже приводится совместимость события OrientationChange:
Ниже приводится совместимость Screen.orientation:
План 2:Приведенный выше план не работает, поэтому вы можете делать только другие методы. Google и узнайте, что это может быть достигнуто с помощью Resisize (window.inner/OverWidth, Window.inner/OuterHeight):
window.addeventListener ("resize", function (event) {var privious = (window.innerwidth> window.innerheight)? "" Ландшафт ":" портрет "; if (orentation === 'portrait') {// сделай что -то…} else {// делай что -то еще…}}, false);Это решение в основном отвечает потребностям большинства проектов, но все еще есть некоторые недостатки:
Пока размер окна изменяется, событие Resisize будет запущено непрерывно. Вы можете использовать SetTimeout для оптимизации
Если есть несколько мест, которые необходимо для отслеживания горизонтальных и вертикальных экранов, вам необходимо зарегистрировать несколько Windows.AddeventListener («RESIZE», Function (Event) {...}). Можете ли вы улучшить его с помощью режимов подписки и публикации? Зарегистрируйте изменение размера, чтобы контролировать изменения горизонтальных и вертикальных экранов, и публикуйте уведомления о подписанном объекте, пока происходят горизонтальные и вертикальные изменения. Другие места, которые должны контролировать горизонтальные и вертикальные экраны, являются лишь подпиской.
Ключевой код заключается в следующем:
var resizecb = function () {if (win.innerwidth> win.innerheight) {// инициализировать суждение meta.init = 'ландшафт'; meta.current = 'ландшафт'; } else {meta.init = 'портрет'; meta.current = 'портрет'; } return function () {if (win.innerwidth> win.innerheight) {if (meta.current! == 'landscape') {meta.current = 'ландшафт'; event.trigger ('__ OrientationChange__', Meta); }} else {if (meta.current! == 'portrait') {meta.current = 'портрет'; event.trigger ('__ OrientationChange__', Meta); }}}}}}} ();Полный код нажимается здесь
План 3:
Тем не менее, я лично думаю, что реализация window.innerwidth> window.innerheight является своего рода псевдо обнаружением, что немного ненадежно. Можно ли достичь обнаружения через браузер? Это основано на запросе CSS3@Media Media.
Следующим образом @media совместимость:
Как показано на приведенном выше рисунке, мобильные браузеры поддерживают CSS3 Media.
Идеи реализации:
Создайте конкретный стиль CSS, который идентифицирует горизонтальный и вертикальный статус экрана
Введите CSS -код в страницы через JS
Функция обратного вызова
Здесь я выбираю семейство шрифта узла <html> </html> в качестве атрибута стиля обнаружения. Причины следующие:
Выберите <html> </html> в основном, чтобы избежать отбоя и перекрашивания
Стиль семейства шрифтов в основном потому, что семья Font имеет следующие характеристики:
Таким образом, мы можем указать конкретный логотип для определения состояния горизонтального и вертикального экрана, но указанный логотип должен быть размещен перед другими шрифтами, чтобы изменения шрифта HMTL не были вызваны.
Ключевой код заключается в следующем:
// обратный вызов var resizecb = function () {var hstyle = win.getComputeDStyle (html, null), ffstr = hstyle ['' font-family '], pstr = "портрет," + ffstr, lStr = "Landscape," + ffstr, // splicing csssstr = .orientation {font-family: ' + pstr +';}} @Media (ориентация: ландшафт) {.Orientation {font-family: ' + lstr +';}} '; // Стиль загрузки LoadStestestring (CSSSTR); // Добавить класс html.classname = 'Orientation' + html.classname; if (hshyle ['font-family'] === pstr) {// инициализировать суждение meta.init = 'портрет'; meta.current = 'портрет'; } else {meta.init = 'ландшафт'; meta.current = 'ландшафт'; } return function () {if (hStyle ['font-family'] === pstr) {if (meta.current! == 'portrait') {meta.current = 'портрет'; event.trigger ('__ OrientationChange__', Meta); }} else {if (meta.current! == 'landscape') {meta.current = 'landscape'; event.trigger ('__ OrientationChange__', Meta); }}}}}} ();Полный код нажимается здесь
Результаты теста
Эффект портрета:
Эффект ландшафта:
План 4:
Вы можете улучшить его. При поддержке ориентации change используйте нативную ориентацию. Если нет, используйте решение 3.
Ключевой код заключается в следующем:
// Поддерживается ли событие ориентации. meta.current = 'портрет'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'ландшафт'; meta.current = 'ландшафт'; } return function () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'портрет'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'landscape'; } event.trigger (EventType, Meta); }}; var callback = isorientation? OrientationCb (): (function () {resizecb (); return function () {timer && win.cleartimeout (timer); timer = win.settimeout (resizecb, 300);}}) (); // слушать win.addeventListener (isorientation? Eventtype: 'resize', callback, false);Полный код нажимается здесь
План 5:
В настоящее время приведенные выше решения реализуются с помощью индивидуальной подписки и публикации режимов событий. Здесь ориентация может быть смоделирована на основе механизма событий браузера. То есть исправить несовместимость ориентации.
Ключевой код заключается в следующем:
var EventType = 'OrientationChange'; // запустить нативную ориентацию chire fire = function () {var e; if (document.createevent) {e = document.createevent ('htmlevents'); E.InitEvent (EventType, True, False); win.dispatchevent (e); } else {e = document.createeventObject (); E.EventType = EventType; if (win [eventtype]) {win [eventtype] (); } else if (win ['on' + eventtype]) {win ['on' + eventtype] (); } else {win.fireVent (EventType, e); }}}Полный код нажимается здесь
Через пять вышеупомянутых решений у меня есть дальнейшее понимание горизонтального и вертикального обнаружения экрана на мобильных терминалах. Я знаю только, почему я сам пишу о некоторых вещах после того, как я испытал их сам. Я также записал причины в статье, надеясь, что они будут полезны для всех. После пяти решений превратились в окончательное изменение ориентации, Github Адрес: https://github.com/zhansingsong/orientationchange-fix
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.