Sitio móvil: solo paisaje forzado / sin giro automático

Tengo un sitio que tiene una hoja de estilo móvil:

 

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!

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.

   

Creo que es el mejor enfoque

No puede forzar la orientación en la página web, pero puede sugerir o bloquear contenido en modo portarit.

Hice una adaptación de un script existente

en tu archivo html agrega un elemento div

 
Turn your device in landscape mode.

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

  

Avíseme si esta solución funciona para usted.

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:

   

Probé el siguiente código y forzó al navegador a usar el modo vertical:

  

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