Cómo juzgar
Los dispositivos móviles proporcionan dos objetos, un atributo y un evento:
(1) Window. La orientación pertenece al atributo anterior del objeto de la ventana; Hay tres valores: 0 es retrato, 90 se invierte a la izquierda y gira al modo paisajista, -90 está invertido hacia la derecha y gira al modo paisajista, y el último 180 es si el dispositivo está invertido a la parte inferior o vertical.
(2) OrientationChange es un evento que activará este evento cuando el dispositivo gire, al igual que el evento de cambio de tamaño utilizado en la PC.
Cuando estos dos se usan juntos, es fácil obtener el estado de pantalla horizontal y vertical del dispositivo. El código es el siguiente:
(function () {var init = function () {var updateArientation = function () {var orientation = window.orientation; switch (orientación) {case 90: case -90: orientation = 'paisaje'; ruptura; default: orientación = 'retrato'; ruptura;} // hacer algo // Por ejemplo, agregue un estado a la etiqueta HTML // luego exhiba diferentes satuss sates sates sates sates sates sates sates sates sates sates sates sates sates satus sates satusssames satusssames de los satuses. Document.Body.ParentNode.SetTruteEn CSS puedes escribir de esta manera:
/** Border de rendimiento Div Muestra azul **/. Retrato Body div {borde: 1px azul sólido;}/** El borde de la división muestra amarillo **/. Landscape Body Div {Border: 1px Solid Yellow;}Por supuesto, también puede usar consultas de medios (recomendadas):
@Media All y (Orientación: Retrato) {Body Div {Border: 1px azul sólido; }}@Media all y (orientación: paisaje) {cuerpo div {borde: 1px amarillo sólido; }}compatibilidad
¿Cómo lidiar con la situación en la que la orientación u orientación no existe en el dispositivo? (Generalmente uno no existe, el otro no existe, de lo contrario)
En el desarrollo temprano, el modo de modelo de dispositivo de Chrome a menudo se usa, pero esta propiedad no existe, entonces, ¿cómo puedo obtener este valor? El método simple es juzgar según la comparación del ancho y la altura. Si el ancho es más pequeño que la altura, es una pantalla vertical, y el ancho y la altura son una pantalla horizontal.
Sé cómo obtener el resultado. Lo siguiente es cómo escuchar los eventos de reversión del dispositivo. Dado que OrientationChange no está disponible, use el evento de cambio de tamaño más básico o use el temporizador para detectarlo. Mire el código:
(function () {var updateOrientation = function () {var orientation = (window.innerwidth> window.innerheight)? 'paisaje': 'retrato'; document.body.parentnode.setattribute ('class', orientación);}; var init = function () {updateIrientation (); // verificar cada 5 segundos //set.setinterval (orientación (orientación (5000); el cambio de evento Window.AdDeventListener ('cambiar el tamaño', updateArientation, false);Finalmente, combinar los dos métodos anteriores es una solución de detección completa
(function () {var compatorientation = (typeof window.orientation === 'number' && typeof window.onorientationchange === 'objeto'); var init = function () {var htmlnode = document.body.parentNode, orientation; var updateorientation = function () {if (SupportOrientation) {Orientation = Windows.orientation; (orientación) Orientación = 'Landscape'; Window.AdDeventListener ('OrientationChange', updateOrientation, false);Resumir
Use el evento OrientationChange para monitorear si el dispositivo gira y use la propiedad de orientación de ventana para determinar si actualmente es una pantalla horizontal o vertical, para realizar diferentes operaciones.