Recientemente, escribí una página móvil en el trabajo. Al principio no era nada, pero había un requisito que parecía muy extraño. Nunca antes lo había encontrado. La página que escribí debía colocarse en una aplicación, pero la aplicación estaba en. orientación horizontal, la vista web que abre esta página también está en pantalla horizontal (la última versión de la aplicación se abre en vista web de pantalla vertical), originalmente usamos el diseño rem y no hay problema en el estado de pantalla horizontal, pero la Parte A. Espera utilizar la pantalla horizontal en la pantalla horizontal. Forzar que esta página se muestre verticalmente cuando la pantalla esté abierta. Entonces existe la siguiente serie de operaciones.
La primera es determinar el estado de la pantalla horizontal, utilizando el siguiente código:
function orient() { if(window.orientation == 90 || window.orientation == -90) {//pantalla horizontal//ipad, pantalla vertical de iPhone//$(body).attr(class, paisaje); //orientación = 'paisaje'; //alerta(ipad, pantalla vertical del iphone; pantalla horizontal de Andriod); == 0 || ventana.orientación == 180) {//Pantalla vertical//ipad, pantalla horizontal de iphone;/ $(body).attr(class, vertical);// orientación = 'retrato'; //alert(ipad, pantalla horizontal de iphone; pantalla vertical de Andriod); $(p).text(pantalla vertical return false; }); //Se llama cuando el usuario cambia la orientación de la pantalla $(window).on('orientationchange', function(e) { orient(); });Esto está monitoreando la dirección del teléfono móvil. Sin embargo, debido a que la aplicación se abre horizontalmente, generalmente es imposible detectarlo, y un requisito previo para esto es que el teléfono tenga activada la rotación automática. Entonces se abandonó el método anterior.
Dado que se abandonó el método inteligente, el método más económico es controlar el ancho y el alto de la pantalla. Cuando la altura es mayor que el ancho, por defecto usamos el estado de pantalla vertical del teléfono. Cuando el ancho es mayor que la altura, consideramos que el teléfono está en el estado de pantalla horizontal. (Por supuesto, esto también tiene limitaciones, pero considerando que la nueva APP ha solucionado el problema de las pantallas horizontales y verticales, lo haremos aquí). No necesitamos hacer nada cuando la pantalla está en modo vertical. Pero en modo horizontal, tenemos que rotar la página 90 grados. Sin más preámbulos, veamos directamente el código:
//Utilice la rotación CSS3 para rotar el contenedor raíz 90 grados en sentido antihorario para obligar al usuario a mostrarlo verticalmente var detectOrient = function() { var width = document.documentElement.clientWidth, height = document.documentElement.clientHeight, //$wrapper = documento. getElementsByTagName(cuerpo)[0], $wrapper = document.getElementById(vue), estilo = if(ancho <=; altura) { // Pantalla horizontal // estilo += ancho: + ancho + px; // Preste atención al cambio de ancho y alto después de la rotación // estilo += alto: + alto + px;;// estilo += -webkit- transformar: rotar(0); transformar: rotar(0);// estilo += -webkit-transform-origin: 0 0;;// estilo += transformar-origen: 0 0;; tamaño de fuente: + (ancho * 100/1125) + px; var html_doc = document.getElementsByTagName(html)[0]; html_doc.style.cssText = tamaño de fuente: + (ancho * 100/1125) + px } else { // Estilo vertical + = ancho: + alto + px;; estilo += altura mínima: + ancho + px;; -webkit-transform: rotar(-90deg); transformar: rotar(-90deg); // Preste atención al manejo del estilo del punto medio de rotación += -webkit-transform-origin: + altura / 2 + px + (altura / 2) + px;; estilo += origen-transformación: + altura / 2 + px + (altura / 2) + px; //estilo += tamaño de fuente: + altura * 100 / 1125 + px;; //$(html).css({font-size:(altura * 100/1125),overflow-y:hidden}); style.cssText = tamaño de fuente: + altura * 100/1125 + px; desbordamiento-y:+oculto;+altura:+altura+px;; estilo += desbordamiento-y: oculto;; add_tab(); $wrapper.style.cssText = estilo } }window.onresize = detectOrient;detectOrient() ;función add_tab(){ var clone_tab = $(pie de página).clone(); $(pie de página).remove(); clone_tab.css({transform:rotate(-90deg),transform-origin:arriba a la derecha}) $(body).append(clone_tab.css({posición:fijo,derecha:1.77rem,abajo:4rem,izquierda); :automático,arriba:0,ancho:11,25rem,alto:1,77rem})}Creo que este código no es difícil para el personal de front-end, pero hay tres puntos que deben tenerse en cuenta.
Primer punto:
Al principio, giré directamente todo el html por conveniencia. En este momento, habrá un problema, es decir, el posicionamiento de elementos posicionados fijos en la página no funcionará (el <pie de página> en el código se coloca como un. interruptor de pestaña. abajo); necesitamos cambiar esto. Dado que rotar el elemento principal no funcionará en los elementos secundarios, entonces no necesitamos rotar el elemento principal, solo rotar sus elementos hermanos directamente. Aquí estoy rotando un elemento llamado #vue, porque todo el resto del contenido de mi página está en este div. Así que simplemente roté el elemento. Luego, en este momento se puede usar el posicionamiento, pero el estilo es incorrecto, por lo que en mi función add_tab, ajusto el tamaño y el estilo de este elemento para que pueda mostrarse normalmente en el lado derecho de la pantalla, es decir, en vertical. modo , la parte inferior de la pantalla.
Segundo punto:
La segunda cosa a tener en cuenta es que debido a que uso el diseño rem, cambiaré el tamaño de fuente del html, pero tenga cuidado en este momento. Cuando lo rotamos, el ancho se convierte en alto y el alto se convierte en ancho, por lo que. Es necesario utilizar la altura para calcular el tamaño de fuente del directorio raíz.
El tercer punto:
El tercer punto está anotado en el programa. Debemos prestar atención al centro de rotación. El centro de rotación predeterminado es el punto central del elemento seleccionado. Ahora queremos cambiar el punto central de rotación. Después de la rotación, también necesita overflow-y:hidden el html. De lo contrario, habrá un desplazamiento innecesario.
En este caso, básicamente se gira toda la página y los elementos colocados fijamente en la parte inferior se colocan nuevamente con éxito. Afortunadamente, la ventana emergente que utilizamos es la ventana emergente de Layui, y luego podemos girar la ventana emergente 90 grados.
PD: Finalmente, encontré un problema que no se puede resolver cuando la página es lo suficientemente larga, es decir, cuando hay una barra de desplazamiento, después de que aparece la ventana emergente, si desliza la capa de máscara detrás de ella, la siguiente. las páginas se deslizarán hacia arriba. Esto podría haberse resuelto originalmente. El artículo anterior se resolvió usando un posicionamiento fijo, pero debido a la rotación, esto falló, por lo que no hay una buena manera. No hay ningún problema en modo retrato.
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.