Detectar el cambio de orientación del iPad

2 minutos de lectura

avatar de usuario
lolalola

¿Cómo detectar con javascript o jquery cuando el usuario cambia el iPad de posición vertical a horizontal o de horizontal a vertical?

avatar de usuario
Karl-Bjørnar Øie

Probar

$(window).bind('orientationchange', function(event) {
  alert('new orientation:' + event.orientation);
});

  • En el Ipad 1 que estoy probando, el objeto de evento no tiene una propiedad de orientación, pero el objeto de ventana sí, así que tuve que usar orientation más bien que event.orientation.

    – tembloroso

    2 oct 2012 a las 23:15

  • Muchas gracias por la respuesta @Karl-Bjørnar Øie. ¡Resolvió mi problema de la mejor manera!

    – Anahit Ghazaryan

    3 de junio de 2015 a las 7:57

  • @Mrunal en pageLoad() o una función similar que siempre se llamará antes de interactuar con la página.

    – GreySage

    20 de julio de 2017 a las 17:24

avatar de usuario
martinas

Puede detectar el evento de cambio de orientación usando el siguiente código:

jQuery:

$(document).ready(function() {
    $(window).on('orientationchange', function(event) {
        console.log(orientation);
    });
});

Comprobar si el dispositivo está en modo vertical

function isPortrait() {
    return window.innerHeight > window.innerWidth;
}

  • ¿No debería ser así? console.log(event.orientation) ? (falta el evento)

    – David

    23 de enero de 2017 a las 13:55


avatar de usuario
Simón

En Javascript:

<button onclick="detectIPadOrientation();">What's my Orientation?</button>

<script type="text/javascript">
 window.onorientationchange = detectIPadOrientation;
 function detectIPadOrientation () {

    if ( orientation == 0 ) {
     alert ('Portrait Mode, Home Button bottom');
    }
    else if ( orientation == 90 ) {
     alert ('Landscape Mode, Home Button right');
    }
    else if ( orientation == -90 ) {
     alert ('Landscape Mode, Home Button left');
    }
    else if ( orientation == 180 ) {
     alert ('Portrait Mode, Home Button top');
    }
 }
</script>

O para incluir hojas de estilo adicionales:

<link rel="stylesheet" media="all and (orientation:portrait)" href="https://stackoverflow.com/questions/6249722/portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Ambos tomados de: http://favo.asia/2010/07/detecting-ipad-orientation-using-javascript/ que, FYI, fue el primer resultado en Google para ‘detectar javascript de orientación de ipad’…

  • Ahora, esta pregunta está en la parte superior de Google 🙂

    – Óliver

    9 de noviembre de 2016 a las 10:51

  • @simon ¿de dónde obtienes la variable de orientación?

    – MJB

    11 de diciembre de 2017 a las 11:31

avatar de usuario
Fatih Acet

function detectIPadOrientation (orientation) {  
   if ( orientation == 0 ) {  
    alert ('Portrait Mode, Home Button bottom');  
   }  
   else if ( orientation == 90 ) {  
    alert ('Landscape Mode, Home Button right');  
   }  
   else if ( orientation == -90 ) {  
    alert ('Landscape Mode, Home Button left');  
   }  
   else if ( orientation == 180 ) {  
    alert ('Portrait Mode, Home Button top');  
   }  
}

window.onorientationchange = detectIPadOrientation;

¿Ha sido útil esta solución?