¿Puedo activar un evento de CSS en Safari móvil en el cambio de orientación iPhone?

StackOverflow https://stackoverflow.com/questions/2313194

  •  22-09-2019
  •  | 
  •  

Pregunta

Estoy tratando de encontrar la manera de cambiar una página Web incorporado cuando el usuario gira el teléfono de vertical a horizontal - básicamente para cargar una vista que se adapta mejor al formato de pantalla ancha. ¿Es esto posible hacerlo sin llamar a una nueva página desde el servidor, es decir, para conducirlo desde dentro CSS / Javascript en sí?

Gracias!

¿Fue útil?

Solución

Puede utilizar la propiedad window.orientation. Su valor es la medida en que se utiliza el modo de vista actual. He aquí una breve ejemplo: 

function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

Se puede utilizar esta función en este caso: 

window.onorientationchange=updateOrientation;

Espero que ayude!

Otros consejos

Es mejor no establecer la propiedad onorientationchange directamente. En lugar de utilizar el siguiente: 

window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);

No puedo creer que nadie hablado de la CSS gobernante: 

@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}

@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}

El navegador móvil Safari cuenta con el apoyo de la orientationchange evento, así como la propiedad orientation en la ventana, por lo que puede hacer algo como: 

window.onorientationchange = function() {
    switch(window.orientation) {
        case 0:   // Portrait
        case 180: // Upside-down Portrait
            // Javascript to setup Portrait view
            break;
        case -90: // Landscape: turned 90 degrees counter-clockwise
        case 90:  // Landscape: turned 90 degrees clockwise
            // Javascript to steup Landscape view
            break;
    }
}

Yo añadiría al revés porque las directrices de la interfaz humana protectores y dicen que se deben apoyar todos orientaciones, por lo que se puede esperar Safari en el iPad (y, posiblemente, las futuras versiones de iPhone) para apoyarla.

soportes Safari Mobile eventos de orientación . 

<body onorientationchange="updateOrientation();">

De: guía de contenidos web Safari

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top