jquery - Sitio móvil: solo paisaje forzado/sin giro automático
css mobile (5)
Creo que el mejor enfoque es el script para que cuando el usuario cambie, cambie. Modifiqué esto para que gire tu página DIV principal cuando está en retrato, lo que obliga al usuario a cambiar. A menos que quieran inclinar la cabeza hacia los lados:
<script type="text/javascript">
(function () {
detectPortrait();
$(window).resize(function() {
detectPortrait("#mainView");
});
function detectPortrait(mainDiv) {
if (screen.width < screen.height) {
$(mainDiv).addClass("portrait_mode");
}
else {
$(mainDiv).removeClass("portrait_mode");
}
}
})();
</script>
<style type="text/css">
.portrait_mode {
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
</style>
Tengo un sitio que tiene una hoja de estilo móvil:
<link rel="stylesheet" href="css/mobile.css" media="handheld">
También estoy usando jQuery para buscar dispositivos móviles y modificar la funcionalidad en consecuencia.
Pero quiero saber si hay una forma de forzar la orientación solo horizontal y desactivar la rotación automática. O bien una solución CSS o jQuery estaría bien.
¡Gracias!
No puede forzar la orientación en la página web, pero puede sugerir o bloquear contenido en modo portarit.
Hice una adaptation de un script existente
en tu archivo html agrega un elemento div
<div id="block_land">Turn your device in landscape mode.</div>
Luego adapta tu CSS para cubrir toda tu página
#block_land{position:absolute; top:0; left:0; text-align:center; background:white; width:100%; height:100%; display:none;}
A continuación, agregue un pequeño javascript para detectar la orientación
function testOrientation() {
document.getElementById(''block_land'').style.display = (screen.width>screen.height) ? ''none'' : ''block'';
}
No te olvides de probar la orientación en la carga y en el cambio de orientación, tal vez en la etiqueta de tu cuerpo
<body onorientationchange="testOrientation();" onload="testOrientation();">
Avíseme si esta solución funciona para usted.
Probé el siguiente código y forzó al navegador a usar el modo vertical:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
Este código ha sido probado en un iPhone y en otro dispositivo móvil.
Una forma simple de forzar la orientación horizontal es configurar el ancho min-max en su código css, intente usar este código
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
body {
-webkit-transform: rotate(90deg);
width: 100%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}}
espero resolver tu problema
Use consultas de medios para probar la orientación, en la hoja de estilos de retrato, oculte todo y muestre un mensaje de que la aplicación solo funciona en modo horizontal.
<link rel="stylesheet" type="text/css" href="css/style_l.css" media="screen and (orientation: landscape)">
<link rel="stylesheet" type="text/css" href="css/style_p.css" media="screen and (orientation: portrait)">
Creo que es el mejor enfoque