Use medios para determinar el problema encontrado en el ancho de la pantalla:
En iOS, puedo hacerlo cuando giro la pantalla, pero no respondió a Android. La pantalla horizontal todavía muestra mi estilo de pantalla vertical.
Después de verificar la información, si los medios de comunicación de CSS3 quieren tener un mejor efecto de visualización en el lado móvil, debe agregar este código al encabezado de la página.
<Meta name = "Viewport" Content = "Width = Device-Width, inicial a escala = 1.0, máxima escala = 1.0, user-escalable = no">
Pero no puedo usar este código. Porque mi página está adaptada. El tamaño de fuente y el tamaño del estilo se pueden mostrar de acuerdo con el tamaño de la pantalla. Si agrego este código, mi adaptación no funcionará. Entonces usa otros métodos
Solución:
El dispositivo móvil proporciona un evento: OrientationChange Event
Este evento fue agregado por Apple para Safari. Para que los desarrolladores puedan determinar cuándo el usuario cambia el dispositivo desde la vista del paisaje hasta el modo de vista de retrato.
Este evento se activará cuando el dispositivo gire.
// Escuchar los cambios de orientación Window.AdDeventListener ("OrientationChange", function () {// anuncia la nueva orientación numberert (window.orientation);}, falso);Mientras el usuario cambie el modo de visualización del dispositivo, el evento OrientationChange se activará. El objeto del evento en este momento no contiene ninguna información valiosa.
Porque se puede acceder a la única información relevante a través de la ventana.
atributo de orientación
Tiene tres valores: 0,90, -90
0 es retrato, -90 significa que el dispositivo gira horizontalmente al modo de paisaje a la derecha, mientras que 90 significa que el dispositivo gira horizontalmente al modo de paisaje a la izquierda.
Hay otro que es 180, lo que significa la pantalla vertical pero es un modo de pantalla vertical volteado. Pero este modelo aún no ha sido compatible.
Como se muestra en la figura:
Por lo tanto, combinando este evento de cambio de orientación y la propiedad de orientación de la ventana, es más fácil para nosotros determinar si el dispositivo está en una pantalla horizontal o vertical.
(function () {var init = function () {var updateArientation = function () {var orientation = window.orientation; switch (orientación) {case 90: case -90: orientation = 'Landscape'; // Aquí está Horizontal Break; Default: Orientación = 'Portrait'; // aquí está la ruptura vertical;} // Html Add Diferts Classes de acuerdo con los estados de Rotación Diferentes, ADDAUTATION, ADDIA, AGREGAR '; pantalla vertical //plusportDocument.body.parentnode.setattribute('Class',orientation);} ;// Este evento se llama para cada rotación.Por lo tanto, la clase se puede agregar de acuerdo con diferentes estados de rotación, por lo que nuestro CSS se puede escribir así
/** El cuerpo de rendimiento muestra rojo **/. Body de retrato Div {fondo: rojo;}/** El cuerpo de ancho de mano muestra azul **/. Body de paisaje div {fondo: azul;}Otra forma de escribir es usar consultas de medios
@Media all y (orientación: retrato) {cuerpo div {fondo: rojo;}} @media all y (orientación: paisaje) {cuerpo div {fondo: azul; }}Esta consulta de medios de orientación funciona en iOS3.2+ y Android 2.0+.
Hablando relativamente, este tipo de código es un poco más conciso. Con el JS+CSS anterior, este tipo de código es CSS puro. Cuando el dispositivo gira, el CSS que cambia la dirección se llamará de acuerdo con la dirección del dispositivo girado.
compatibilidad
Algunos dispositivos no proporcionan un evento de OrientationChange, pero no activan el evento de cambio de tamaño de la ventana. Y si las consultas de los medios no las apoyan, ¿qué debemos hacer?
Puede ser juzgado por el evento de cambio de tamaño. Use Innerwidth y InnerHeight para recuperar el tamaño de la pantalla. A juzgar por la comparación de ancho y altura, ancho y altura son pantallas verticales, y el ancho y la altura son pantallas horizontales.
El código es el siguiente:
(function () {var updateOrientation = function () {var orientation = (window.innerwidth> window.innerheight)? 'paisaje': 'retrato'; document.body.parentnode.setTtribute ('class', orientación);}; var init = function () {updateIrientation (); // Escuchar el evento RESISA Window.AdDeventListener ('RESEZE', updateArientation, false);}; window.adDeventListener ('domcontentloaded', init, false);}) ();De esta manera, podemos ver los cambios de estilo traídos por la rotación de la pantalla en el navegador.
La combinación de los dos métodos de detección es la siguiente:
(function () {var compatorInientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'objeto'); var init = function () {var htmlnode = document.body.parentNode, orientation; var updateArientation = function () {if (SupportOrientation) {orientación = window.orientation; (orientación) -90: orientación = 'paisaje'; break; default: orientación = 'retrato'; break;}} else {orientation = (window.innerwidth> window.innerheight)? 'Retrato';} htmlnode.setattribute ('class', orientación);}; if (soportorientation) {window.addeventListener ('orientationchange', updateArientation, false);} else {// Escuche el evento RESISE Window.AdDeventListener ('RESEZE', updateOrientation, false);} updateOrientation ();}; window.adDeventListener ('domcontentloaded', init, false);}) ();Usando este método, puede resolver la molesta detección horizontal y vertical de la pantalla de dispositivos móviles.