Cómo averiguar si ipad es en modo horizontal / vertical en JavaScript / jQuery?

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

Pregunta

Quiero añadir un div extra si el iPad es en modo horizontal. ¿Hay algún tipo de declaración que si pudiera averiguar esto?

Gracias

¿Fue útil?

Solución

jQTouch controles de TI, así: 

orientation = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';

http://github.com/senchalabs/jQTouch/blob /master/jqtouch/jqtouch.js

También se puede escuchar a onorientationchange acontecimientos

Véase la respuesta anterior: Detección de rotación del teléfono Android en el navegador con JavaScript

Otros consejos

Se podría hacer una simple comprobación de la anchura del documento. 

$(window).width();

Se podría establecer a una variable, y luego compruebe la variable frente a la resolución nativa del iPad:. 768px x 1024px de en el retrato 

<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Rotation Test</title>
  <link type="text/css" href="css/style.css" rel="stylesheet"></style>
  <script src="js/jquery-1.5.min.js" type="text/javascript"></script>
  <script type="text/javascript">
        window.addEventListener("resize", function() {
            // Get screen size (inner/outerWidth, inner/outerHeight)
            var height = $(window).height();
            var width = $(window).width();

            if(width>height) {
              // Landscape
              $("#mode").text("LANDSCAPE");
            } else {
              // Portrait
              $("#mode").text("PORTRAIT");
            }
        }, false);

  </script>
 </head>
 <body onorientationchange="updateOrientation();">
   <div id="mode">LANDSCAPE</div>
 </body>
</html>

puede probar la solución, compatible con todos los navegadores.

A continuación se orientationchange pic compatibilidad: compatibilidad por lo tanto, el autor un polyfill orientaionchange, se basa en un @media atributo a la utilidad del arreglo orientationChange library-- orientationChange -fix 

window.addEventListener('orientationchange', function(){
 if(window.neworientation.current === 'portrait|landscape'){
    // do something……
 } else {
    // do something……
 }
}, false);

y, a continuación, se puede recuperar el estado actual de la orientación por window.neworientation.current y el estado inicial de la orientación por window.neworientation.init.

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