javascript - bloquear landscape html
Bloqueo de la rotación del dispositivo en páginas web móviles (7)
¿Es posible detectar en mi página, por ejemplo, usando Javascript, cuando el usuario lo visita utilizando un dispositivo móvil en modo vertical, y deja de cambiar de orientación cuando el usuario gira el teléfono para colocarlo en horizontal? Hay un juego en mi página, optimizado para visualización vertical solamente y no lo quiero en el paisaje.
¡Nuevas API están en desarrollo (y están actualmente disponibles)!
screen.orientation.lock(); // webkit only
y
screen.lockOrientation("orientation");
Donde "orientación" puede ser cualquiera de los siguientes:
portrait-primary : representa la orientación de la pantalla cuando está en su modo de retrato principal. Una pantalla se considera en su modo de retrato primario si el dispositivo se mantiene en su posición normal y esa posición está en posición vertical, o si la posición normal del dispositivo está en el paisaje y el dispositivo se mantiene girado 90 ° en el sentido de las agujas del reloj. La posición normal depende del dispositivo.
portrait-secondary - Representa la orientación de la pantalla cuando está en su modo de retrato secundario. Se considera una pantalla en su modo de retrato secundario si el dispositivo se mantiene a 180 ° de su posición normal y esa posición está en posición vertical, o si la posición normal del dispositivo es horizontal y el dispositivo sostenido gira 90 ° en el sentido contrario a las agujas del reloj. La posición normal depende del dispositivo.
landscape-primary : representa la orientación de la pantalla cuando está en su modo primario de paisaje. Una pantalla se considera en su modo de paisaje primario si el dispositivo se mantiene en su posición normal y esa posición está en el paisaje, o si la posición normal del dispositivo está en retrato y el dispositivo sostenido se gira 90 ° en el sentido de las agujas del reloj. La posición normal depende del dispositivo.
landscape-secondary - Representa la orientación de la pantalla cuando está en su modo de paisaje secundario. Se considera una pantalla en su modo de paisaje secundario si el dispositivo está a 180 ° de su posición normal y esa posición está en horizontal, o si la posición normal del dispositivo es vertical y el dispositivo sostenido gira 90 ° en el sentido contrario a las agujas del reloj. La posición normal depende del dispositivo.
retrato - Representa tanto el retrato primario como el retrato secundario.
paisaje - Representa el paisaje primario y el paisaje secundario.
predeterminado : representa primaria vertical y primaria horizontal depende de la orientación natural de los dispositivos. Por ejemplo, si la resolución del panel es 1280 * 800, el valor predeterminado será horizontal, si la resolución es 800 * 1280, el valor predeterminado será vertical.
Mozilla recomienda agregar lockOrientationUniversal a la pantalla para que sea más compatible con todos los navegadores.
screen.lockOrientationUniversal = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
Vaya aquí para obtener más información: https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation
Código JavaScript simple para hacer que el navegador móvil se muestre en vertical o en paisaje.
(Aunque debe ingresar el código html dos veces en los dos DIV (uno para cada modo), podría decirse que se cargará más rápido que el uso de javascript para cambiar la hoja de estilo ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
window.addEventListener(orientationEvent, function() {
if(window.orientation==0)
{
document.getElementById(''portrait'').style.display = '''';
document.getElementById(''landscape'').style.display = ''none'';
}
else if(window.orientation==90)
{
document.getElementById(''portrait'').style.display = ''none'';
document.getElementById(''landscape'').style.display = '''';
}
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>
<script type="text/javascript">
if(window.orientation==0)
{
document.getElementById(''portrait'').style.display = '''';
document.getElementById(''landscape'').style.display = ''none'';
}
else if(window.orientation==90)
{
document.getElementById(''portrait'').style.display = ''none'';
document.getElementById(''landscape'').style.display = '''';
}
</script>
</body>
</html>
Probado y funciona en Android HTC Sense y Apple iPad.
Con las nuevas características de CSS3, podría rotar la página con la orientación opuesta a la que giraron. Lo sentimos, no IE7- support. :(.
var rotate = 0 - window.orientation;
setAttribute("transform:rotate("+rotate+"deg);-ms-transform:rotate("+rotate+"deg);-webkit-transform:rotate("+rotate+"deg)", "style");
En los navegadores compatibles con JavaScript debería ser fácil determinar si la pantalla está en modo horizontal o vertical y compensar usando CSS . Puede ser útil darles a los usuarios la opción de desactivar esto o al menos advertirles que la rotación del dispositivo no funcionará correctamente.
Editar
La forma más fácil de detectar la orientación del navegador es verificar el ancho del navegador frente a la altura del navegador. Esto también tiene la ventaja de que sabrá si el juego se está reproduciendo en un dispositivo que está orientado naturalmente en modo horizontal (como lo hacen algunos dispositivos móviles como el PSP). Esto tiene más sentido que intentar deshabilitar la rotación del dispositivo.
Editar 2
Daz ha mostrado cómo se puede detectar la orientación del dispositivo, pero detectar la orientación es solo la mitad de la solución. Si desea revertir el cambio de orientación automática, deberá girar todo 90 ° o 270 ° / -90 °, por ejemplo
$(window).bind(''orientationchange resize'', function(event){
if (event.orientation) {
if (event.orientation == ''landscape'') {
if (window.rotation == 90) {
rotate(this, -90);
} else {
rotate(this, 90);
}
}
}
});
function rotate(el, degs) {
iedegs = degs/90;
if (iedegs < 0) iedegs += 4;
transform = ''rotate(''+degs+''deg)'';
iefilter = ''progid:DXImageTransform.Microsoft.BasicImage(rotation=''+iedegs+'')'';
styles = {
transform: transform,
''-webkit-transform'': transform,
''-moz-transform'': transform,
''-o-transform'': transform,
filter: iefilter,
''-ms-filter'': iefilter
};
$(el).css(styles);
}
Nota: si desea rotar en IE en un ángulo arbitrario (para otros fines), necesitará usar la transformación de matriz, por ej.
rads = degs * Math.PI / 180;
m11 = m22 = Math.cos(rads);
m21 = Math.sin(rads);
m12 = -m21;
iefilter = "progid:DXImageTransform.Microsoft.Matrix("
+ "M11 = " + m11 + ", "
+ "M12 = " + m12 + ", "
+ "M21 = " + m21 + ", "
+ "M22 = " + m22 + ", sizingMethod = ''auto expand'')";
styles[''filter''] = styles[''-ms-filter''] = iefilter;
-O use papel de lija CSS . Además, esto aplica el estilo de rotación al objeto ventana, que en realidad nunca he probado y no sé si funciona o no. Puede que necesite aplicar el estilo a un elemento de documento en su lugar.
De todos modos, aún recomendaría simplemente mostrar un mensaje que le pida al usuario que juegue en modo vertical.
Parece extraño que nadie haya propuesto la solución de consulta de medios css:
@media screen and (orientation: portrait) {
...
}
y la opción de usar una hoja de estilo específica:
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#orientation
Puede detectar el cambio de orientación, pero no creo que pueda evitarlo.
Puede usar las propiedades screenSize.width y screenSize.height y detectar cuando ancho> alto y luego manejar esa situación, ya sea haciéndole saber al usuario o ajustando su pantalla en consecuencia.
Pero la mejor solución es lo que dice @ Doozer1979 ... ¿Por qué anularías lo que el usuario prefiere?