No hace mucho, hice un proyecto H5 y necesitaba procesar un poco de procesamiento cuando cambia la pantalla horizontal y vertical. No hay duda de que el cambio de orientación debe usarse para monitorear los cambios en las pantallas horizontales y verticales.
Plan 1:
// Escuche los cambios de orientación Window.adDeventListener ("OrientationChange", Function (Event) {// Juzgando pantallas horizontales y verticales basadas en event.orientation | screen.orientation.angle es igual a 0 | 180, 90 | -90 grados}, falsos);Después de agregar el código, hay varios problemas de compatibilidad. Los problemas de compatibilidad ocurren aquí en dos lugares:
Orientación Cambio
Event.orientation | screen.orientation.AnGNA
La siguiente es la compatibilidad del evento OrientationChange:
La siguiente es la compatibilidad de la pantalla. Orientación:
Plan 2:El plan anterior no funciona, por lo que solo puede hacer otros métodos. Google y aprenda que se puede lograr a través del cambio de tamaño (Window.inner/Outerwidth, Window.inner/OuterHeight):
Window.adDeventListener ("RESEZE", Function (Event) {var orientation = (window.innerwidth> window.innerheight)? "paisaje": "retrato"; if (oritentation === 'retrato') {// hacer algo ...} más {// hacer algo más ...}, falso);Esta solución básicamente satisface las necesidades de la mayoría de los proyectos, pero todavía hay algunas deficiencias:
Mientras cambie el tamaño de la ventana, el evento de cambio de tamaño se activará continuamente. Puedes usar setTimeOut para optimizar
Si hay múltiples lugares que necesitan monitorear pantallas horizontales y verticales, debe registrar múltiples windows.addeventListener ("cambiar de tamaño", función (evento) {...}). ¿Puede mejorarlo a través de los modos de suscripción y publicación? Solo registre un cambio de tamaño para monitorear los cambios en las pantallas horizontales y verticales, y publique notificaciones al objeto suscrito siempre que ocurran los cambios horizontales y verticales. Otros lugares que necesitan monitorear pantallas horizontales y verticales son solo una suscripción.
El código clave es el siguiente:
var resizecb = function () {if (win.innerwidth> win.innerheight) {// inicializar el juicio meta.init = 'paisaje'; meta.current = 'paisaje'; } else {meta.init = 'retrato'; meta.current = 'retrato'; } function de return () {if (win.innerwidth> win.innerheight) {if (meta.current! == 'paisaje') {meta.current = 'paisaje'; event.Rigger ('__ orientationChange__', meta); }} else {if (meta.current! == 'retrat') {meta.current = 'retrat'; event.Rigger ('__ orientationChange__', meta); }}}}}}} ();El código completo se hace clic aquí
Plan 3:
Sin embargo, personalmente creo que la implementación de Window.innerWidth> Window.innerheight es una especie de pseudo detección, que no es confiable. ¿Se puede lograr la detección a través de un navegador? Esto se basa en la consulta CSS3@Media Media.
Como sigue la compatibilidad de @Media:
Como se muestra en la figura anterior, los navegadores móviles admiten medios CSS3.
Ideas de implementación:
Cree un estilo CSS específico que identifique el estado de pantalla horizontal y vertical
Inyectar código CSS en páginas a través de JS
La función de devolución de llamada de cambio de tamaño obtiene el estado de la pantalla horizontal y vertical
Aquí selecciono la familia de fuentes de nodo de <html> </html> como atributo de estilo de detección. Las razones son las siguientes:
Seleccione <html> </html> Principalmente para evitar el reflujo y la repinte
El estilo de la familia Font-Family se debe principalmente a la familia de fuentes tiene las siguientes características:
De esta manera, podemos especificar un logotipo específico para identificar el estado de la pantalla horizontal y vertical, pero el logotipo especificado debe colocarse frente a otras fuentes, de modo que los cambios de fuente HMTL no sean causados.
El código clave es el siguiente:
// devolución de llamada var resizecb = function () {var hstyle = win.getComputedStyle (html, null), ffstr = hstyle ['font-family'], pstr = "retrato," + ffstr, lstr = "paisaje", + ffstr, // splic css css cssstr = '@' @medatación (orientación:: retrato) .Orientation {Font-Family: ' + Pstr +';}} @Media (Orientación: Landscape) {.orientation {Font-Family: ' + lstr +';}} '; // Carga de estilo LoadStyLestring (CSSSTR); // Agregar clase html.classname = 'orientación' + html.classname; if (hStyle ['Font-Family'] === PSTR) {// Inicializar el juicio meta.init = 'retrato'; meta.current = 'retrato'; } else {meta.init = 'paisaje'; meta.current = 'paisaje'; } function de return () {if (hstyle ['Font-Family'] === Pstr) {if (Meta.Current! == 'Portrait') {meta.current = 'retrat'; event.Rigger ('__ orientationChange__', meta); }} else {if (meta.current! == 'paisaje') {meta.current = 'paisaje'; event.Rigger ('__ orientationChange__', meta); }}}}}} ();El código completo se hace clic aquí
Resultados de las pruebas
Efecto de retrato:
Efecto del paisaje:
Plan 4:
Puedes mejorarlo. Al admitir OrientationChange , use el cambio de orientación nativa. Si no, use la solución 3.
El código clave es el siguiente:
// si el evento de OrientationChange es compatible con isorientation = ('orientación' en la ventana && 'onorientationchange' en la ventana); // callbackvar orientationCb = function (e) {if (win.orientation ==== 180 || win.orientation === 0) {meta.init = 'retrato'; meta.current = 'retrato'; } if (win.orientation === 90 || win.orientation === -90) {meta.init = 'paisaje'; meta.current = 'paisaje'; } función de retorno () {if (win.orientation === 180 || win.orientation === 0) {meta.current = 'retrat'; } if (win.orientation === 90 || win.orientation === -90) {meta.current = 'paisaje'; } Event.Rigger (eventType, meta); }}; VAR Callback = isorientation? orientationCb (): (function () {resizeCb (); return function () {timer && win.cleartimeout (timer); timer = win.setTimeOut (resizeCb, 300);}}) (); // escucha win.addeventListener (isorientation? EventTypePe: 'resontar', falso);El código completo se hace clic aquí
Plan 5:
En la actualidad, las soluciones anteriores se implementan a través de modos de eventos de suscripción y publicación personalizados. Aquí, el Change de Orientation se puede simular en función del mecanismo de eventos del navegador. Es decir, arregle la incompatibilidad de la orientación.
El código clave es el siguiente:
var eventType = 'orientationChange'; // desencadenar orientación nationalChangeVar fire = function () {var e; if (document.createEvent) {e = document.createEtevent ('htmlevents'); E.InitEvent (eventType, verdadero, falso); win.dispatchevent (e); } else {e = document.createEseventObject (); E.EventType = EventType; if (win [eventType]) {win [eventType] (); } else if (win ['on' + eventType]) {win ['on' + eventType] (); } else {win.fireEtevent (eventType, e); }}}El código completo se hace clic aquí
A través de las cinco soluciones anteriores, tengo una comprensión adicional de la detección de pantalla horizontal y vertical en terminales móviles. Solo sé por qué escribo sobre algunas cosas yo mismo después de haberlas experimentado yo mismo. También grabé las razones en el artículo, con la esperanza de que sean útiles para todos. Después de que cinco soluciones evolucionaron a la dirección final de OrientationChange-Fix, Github: https://github.com/zhansingsong/orientationchange-fix
Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.