¿Puede un sitio web forzar el bloqueo de rotación de un dispositivo?

Solución:

En una actualización de una pregunta anterior (’12), creo que esto puede ayudar a mucha gente.

No he descubierto una forma real de bloquear la rotación del dispositivo, pero se me ocurrió una alternativa perfecta, que también he visto hacer a algunas personas.

Opción A. Una simple alerta

Mediante el uso de un simple script jQuery, puede detectar la orientación de su dispositivo.

if(window.innerHeight > window.innerWidth){
  alert("Please use Landscape!");
}

Bueno, una alerta simple es fácil, ¡pero la notificación puede ser mucho más agradable!

Opción B. Una bonita notificación de imagen

(actualización a 04-2018: (como acabo de ver mi publicación de nuevo, pensé en algo más fácil …) use media queries. Más o menos lo mismo que a continuación, pero en lugar de usar Javascript, use css, oculte el elemento por defecto y muéstrelo cuando la orientación es horizontal → @media (orientación: paisaje) {…})

Simplemente agregue un fixed elemento a su página que se muestra cuando la orientación ha cambiado.

HTML

<div class="turnDeviceNotification"></div>

CSS

.turnDeviceNotification {
  position:fixed;
  top: 0;
  left:0;
  height:100%;
  width:100%;
  display: none;
}

Puede actualizar este elemento con texto o simplemente conectarlo a una imagen de fondo mediante

.turnDeviceNotification {
  background-image:url('../images/turnDevice.jpg');
  background-size:cover;
}

Simplemente agregue un fondo agradable a su carpeta de imágenes, como el que se muestra a continuación.

Notó que el objeto tiene un display: none ? Eso es porque de lo contrario se mostraría incluso en modo retrato. Ahora, todo lo que necesita hacer es usar el siguiente script, por lo que el objeto se muestra solo en modo horizontal.

jQuery(window).bind('orientationchange', function(e) {
 switch ( window.orientation ) {
  case 0:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 180:
    $('.turnDeviceNotification').css('display', 'none');
    // The device is in portrait mode now
  break;

  case 90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;

  case -90:
    // The device is in landscape now
    $('.turnDeviceNotification').css('display', 'block');
  break;
 }
});

Esto mostrará la notificación solo cuando la orientación del dispositivo haya cambiado a horizontal.

Imposible. Bloquear la rotación es una configuración del dispositivo: http://support.apple.com/kb/HT4085 Cuando no está bloqueado por el dispositivo, el navegador rotará y dado que su contenido está dentro del navegador, el contenido también rotará. Tal vez la ventana gráfica ayude a resolver su problema: “. Veo que le falta esa metaetiqueta.

---

---

Utiliza Nuestro Buscador