javascript - dispositivo - bloquear portrait css

Detectar cambios en la orientación utilizando javascript.

Question

¿Es posible detectar cambios en la orientación del navegador en el iPad o Galaxy Tab usando javascript? Creo que es posible utilizar consultas de medios css.

Answer 1

Agregando a la respuesta de @mplungjan, encontré mejores resultados al usar el evento "nativo" (no sé cómo llamarlo ) del webkit , " orientación a dispositivos ".

En la red de desarrolladores de Mozilla tienen una buena explicación sobre cómo normalizar entre webkit y Gecko, lo que me ayudó a resolver este problema.

Answer 2

De " Dispositivo cruzado, detección de retrato de paisaje de navegador cruzado "

Se trata de averiguar si un dispositivo móvil está en modo vertical u horizontal; No necesitas preocuparte por su orientación. Por lo que sabes, si mantienes tu iPad boca abajo, está en modo retrato.

$(window).bind("resize", function(){
    screenOrientation = ($(window).width() > $(window).height())? 90 : 0;
});

90 significa paisaje, 0 significa retrato, navegador cruzado, dispositivo cruzado.

El evento window.onresize está disponible en todas partes y siempre se activa en el momento adecuado; nunca demasiado temprano, nunca demasiado tarde De hecho, el tamaño de la pantalla también es preciso.

La versión de JavaScript sería esta, corrígeme por favor si me equivoco.

  function getScreenOrientation() {
    screenOrientation = window.outerWidth > window.outerHeight ? 90 : 0;
    console.log("screenOrientation = " + screenOrientation);
  }
  window.addEventListener("resize", function(event) {
    getScreenOrientation();
  });
  getScreenOrientation();

Answer 3

Puede utilizar mediaMatch para evaluar consultas de medios CSS, por ejemplo,

window
    .matchMedia(''(orientation: portrait)'')
    .addListener(function (m) {
        if (m.matches) {
            // portrait
        } else {
            // landscape
        }
    });

La consulta de medios CSS se activa antes del cambio de orientationchange . Si desea capturar el final del evento (cuando se ha completado la rotación), consulte la altura de la ventana móvil después del cambio de orientación .

Answer 4

Puedes usar el evento de cambio de orientación así:

window.addEventListener(''orientationchange'', function(){
     /* update layout per new orientation */
});

Answer 5

Un fragmento de código fácil de usar:

function doOnOrientationChange()
{
    switch(window.orientation)
    { 
        case -90:
        case 90:
          // alert(''landscape'');
          $(''#portrait'').css({display:''none''});
          $(''#landscape'').css({display:''block''});

          break;
        default:
          // alert(''portrait'');
          $(''#portrait'').css({display:''block''});
          $(''#landscape'').css({display:''none''});
          break;
    }
}

window.addEventListener(''orientationchange'', doOnOrientationChange);

// First launch
doOnOrientationChange();

Answer 6

window.orientation es lo que estás buscando. También hay un evento onOrientationChange para Android, iPhone y, estoy seguro, para iPad.

Answer 7

ACTUALIZAR:

Es posible que desee revisar

jQuery orientación móvilcambiar

o la llanura JS one:

window.addEventListener("orientationchange", function() {
  alert(window.orientation);
}, false);

MDN:

window.addEventListener("orientationchange", function() {
    alert("the orientation of the device is now " + screen.orientation.angle);
});

Respuesta anterior

http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/

Safari en el iPad es compatible con la propiedad window.orientation, por lo que si es necesario, puede usar eso para determinar si el usuario está en modo horizontal o vertical. Como recordatorio de esta funcionalidad:

window.orientation is 0 when being held vertically
window.orientation is 90 when rotated 90 degrees to the left (horizontal)
window.orientation is -90 when rotated 90 degrees to the right (horizontal)

También existe el evento de cambio de orientación que se activa en el objeto de la ventana cuando se gira el dispositivo.

También puede usar consultas de medios CSS para determinar si el iPad se mantiene en orientación vertical u horizontal, como por ejemplo:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3889591/Detect-and-Set-the-iPhone--iPads-Viewport-Orientation-Using-JavaScript-CSS-and-Meta-Tags.htm

<script type="text/javascript">
var updateLayout = function() {
  if (window.innerWidth != currentWidth) {
    currentWidth = window.innerWidth;
    var orient = (currentWidth == 320) ? "profile" : "landscape";
    document.body.setAttribute("orient", orient);
    window.scrollTo(0, 1);
  }
};

iPhone.DomLoad(updateLayout);
setInterval(updateLayout, 400);
</script>