Недавно я написал мобильную страницу на работе. Сначала ничего не было, но появилось требование, которое мне показалось очень странным. Я никогда раньше с этим не сталкивался. Написанную мной страницу нужно было разместить в приложении, но приложение было. альбомная ориентация, веб-просмотр, открывающий эту страницу, также находится в горизонтальном режиме (последняя версия приложения открывается в вертикальном веб-просмотре), изначально мы использовали макет rem, и в горизонтальном состоянии экрана проблем нет, но Сторона А. надеется использовать горизонтальный экран на горизонтальном экране. Принудительно отображать эту страницу вертикально, когда экран открыт. Итак происходит следующая серия операций.
Первый — определить состояние горизонтального экрана, используя следующий код:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//горизонтальный экран //ipad, вертикальный экран iphone //$(body).attr(class, ландшафт); // ориентация = 'пейзаж'; // предупреждение (ipad, вертикальный экран Android; горизонтальный экран Andriod); $(p).text(горизонтальный экран); else if(window.orientation); == 0 || window.orientation == 180) {//Вертикальный экран//ipad, горизонтальный экран iPhone; вертикальный экран Android// $(body).attr(class, Portrait);// ориентация = 'портрет'; //alert(ipad, iphone горизонтальный экран; вертикальный экран Andriod); $(p).text(вертикальный экран); return false } } //Вызывается при загрузке страницы $(function() { orient(); }); //Вызывается, когда пользователь меняет ориентацию экрана $(window).on('orientationchange', function(e) { orient(); });Это отслеживание направления мобильного телефона. Однако, поскольку приложение открыто горизонтально, обнаружить это обычно невозможно, и обязательным условием для этого является то, что на телефоне должно быть включено автоматическое вращение. Поэтому от вышеуказанного метода отказались.
Поскольку от умного метода отказались, самый дешевый способ — следить за шириной и высотой экрана. Когда высота больше ширины, мы по умолчанию используем вертикальное состояние экрана телефона. Когда ширина больше высоты, мы считаем, что телефон находится в горизонтальном состоянии экрана. (Конечно, здесь тоже есть ограничения, но учитывая, что новое приложение решило проблему горизонтальных и вертикальных экранов, мы просто сделаем это здесь). Нам не нужно ничего делать, когда экран находится в портретном режиме. Но в ландшафтном режиме нам придется повернуть страницу на 90 градусов. Без лишних слов, давайте посмотрим непосредственно на код:
//Используем вращение CSS3, чтобы повернуть корневой контейнер на 90 градусов против часовой стрелки, чтобы заставить пользователя отображать его вертикально varDetectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = document. getElementsByTagName(body)[0], $wrapper = document.getElementById(vue), style =; if(width <=). height) { // Горизонтальный экран // style += width: + width + px;; // Обратите внимание на переключение ширины и высоты после поворота // style += height: + height + px;;// style += -webkit- Transform: Rotate(0); Transform: Rotate(0);;//style += -webkit-transform-origin: 0 0;;// Style += Transform-Origin: 0 0;; Style += размер шрифта : + (ширина * 100/1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = размер шрифта: + (ширина * 100/1125) + px } else { // Вертикальный стиль + = ширина: + высота + пикселей;; стиль += минимальная высота: + ширина + пикселей;; -webkit-transform: Rotate(-90deg); Transform: Rotate(-90deg); // Обратите внимание на обработку стиля средней точки вращения += -webkit-transform-origin: + height / 2 + px + (height / 2) + px;; style += Transform-origin: + height / 2 + px + (height / 2) + px;; //style += размер шрифта: + высота * 100/ 1125 + пикселей; //$(html).css({font-size:(height * 100/1125),overflow-y:hidden}); var html_doc = document.getElementsByTagName(html)[0]; style.cssText = размер шрифта: + высота * 100/1125 + пикселей +; overflow-y:+hidden;+height:+height+px;; style += overflow-y: скрытый;; $wrapper.style.cssText = style; } }window.onresize = defineOrient;detectOrient(); ;функция add_tab(){ var clone_tab = $(footer).clone() $(footer).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:top right}) $(body).append(clone_tab.css({position:fixed,right:1.77rem,bottom:4rem,left); :auto,верх:0,ширина:11,25рем,высота:1,77рем})}Я считаю, что этот код не сложен для фронтенд-персонала, но есть три момента, на которые следует обратить внимание.
Первый пункт:
Вначале я для удобства сразу повернул весь html. На этот раз возникнет проблема, то есть не будет работать позиционирование фиксированно позиционированных элементов на странице (<footer> в коде размещается как элемент). tab switch.bottom); нам нужно изменить это. Поскольку вращение родительского элемента не будет работать с дочерними элементами, нам не нужно вращать родительский элемент, просто вращайте его родственные элементы напрямую. Здесь я поворачиваю элемент #vue, потому что весь остальной контент на моей странице находится в этом div. Поэтому я просто повернул элемент. Тогда в это время можно использовать позиционирование, но стиль неправильный, поэтому в своей функции add_tab я настраиваю размер и стиль этого элемента так, чтобы он нормально отображался в правой части экрана, то есть в книжной ориентации. режим, нижняя часть экрана.
Второй момент:
Второе, на что следует обратить внимание, это то, что, поскольку я использую rem-макет, я изменю размер шрифта HTML, но будьте осторожны: когда мы его поворачиваем, ширина становится высотой, а высота становится шириной, поэтому мы делаем это. необходимо использовать высоту для расчета размера шрифта корневого каталога.
Третий пункт:
В программе отмечен третий момент. Нам нужно обратить внимание на центр вращения. Центром вращения по умолчанию является центральная точка выбранного элемента. Теперь мы хотим изменить центральную точку вращения. После поворота вам также необходимо переполнить y: скрыть html. В противном случае будет ненужная прокрутка.
В этом случае вся страница по сути поворачивается, а фиксированные элементы внизу снова успешно позиционируются. К счастью, мы используем всплывающее окно Layui, и тогда мы можем повернуть всплывающее окно на 90 градусов.
пс: Наконец-то нашел проблему, которую невозможно решить. Когда страница достаточно длинная, то есть когда есть полоса прокрутки, после всплывающего окна появляется, если сдвинуть за ним слой-маску, последующее. страницы будут скользить вверх. Первоначально эту проблему можно было решить. В статье выше было решено с помощью фиксированного позиционирования, но из-за вращения это не удалось, поэтому хорошего способа нет. В портретном режиме проблем нет.
Выше приведено все содержание этой статьи. Я надеюсь, что она будет полезна для изучения всеми. Я также надеюсь, что все поддержат сеть VeVb Wulin.