rotation - rotar - ¿Puede un sitio web forzar un bloqueo de rotación del dispositivo?

rotacion de pantalla samsung s8

Question

Actualmente estoy trabajando en un sitio web que es relativamente igual para todos los dispositivos; escritorio y móvil. Estoy trabajando con% ya que creo que es la mejor opción.

Está basado en el modo retrato. Si cambia el dispositivo a horizontal, todo el sitio web se ve como un enano gordo.

Entonces me pregunto: ¿hay alguna posibilidad de bloquear un sitio web, mostrarlo en retrato todo el tiempo?

Y con eso, quiero decir: rotación del dispositivo bloqueada. No es que al ir al paisaje, el sitio web regrese a retrato, mientras está en el paisaje. (que ya vi un código en StackOverflow.)

Check my site at: http://prototyping.iscs.nl/mobiel.html

para referencia :)

Gracias por adelantado

Answer 1

Imposible. La rotación de bloqueo es una configuración del dispositivo: http://support.apple.com/kb/HT4085 Cuando no está bloqueado por dispositivo, el navegador rotará y, dado que su contenido está dentro del navegador, el contenido también rotará. Tal vez la ventana gráfica te ayude a resolver tu problema: <meta name = "viewport" content = "width = device-width" /> ". Veo que te estás perdiendo esa metaetiqueta.

Answer 2

En una actualización de una vieja pregunta (''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 a algunas personas.

Opción A. Una alerta simple

Mediante el uso de una secuencia de comandos jQuery simple, puede detectar la orientación de su dispositivo.

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

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

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

Simplemente agregue un elemento fixed 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

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

Simplemente agregue un lindo fondo a su carpeta de imágenes, como la siguiente.

Notado que el objeto tiene una display: none ¿ display: none ? Eso es porque de lo contrario se mostraría incluso en modo retrato. Ahora, todo lo que necesita hacer es usar la secuencia de comandos siguiente, 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.

Answer 3

No creo que sea posible, pero hay algunas maneras de evitarlo

js way: window.DeviceOrientationEvent

camino de css

@media (orientation: landscape) { body { background-color: black; } }