forzar la orientación del dispositivo al paisaje a través de css/js/html?

Question

Duplicar posible:
Mobile site - force landscape only/no auto-rotate

he visto algunos posts sobre esto, pero en realidad no encontrado una respuesta definitiva, en lugar algunas soluciones sugeridas.

¿Es posible forzar la orientación del dispositivo a través de una página web? Es decir: ¿puedo 'atascar' mi sitio como paisaje?

Muchas gracias

Answer 1

Puedes con JavaScript. En primer lugar comprobar si es compatible:

if (window.DeviceOrientationEvent) { 
    console.log("DeviceOrientation is supported"); 
} 

A continuación, agregue eventListener si quieres hacer algo en la rotación:

window.addEventListener('deviceorientation', function(eventData) {}); 

supongo que debe dar lugar a su lado para responder cuando se enciende. No puede desencadenar la orientación, porque el dispositivo lo hace. Entonces, cuando su sitio web se carga en modo horizontal, debe detectarlo y renderizarlo en modo horizontal (¿cargar un CSS personalizado?) Y luego cuando el visitante enciende su teléfono o tableta, el oyente puede volver a presentar su sitio con un nuevo CSS archivo a través de JavaScript (se recomienda jQuery para estas situaciones).

Lo que también puedes hacer es que el sitio no tiene mucha dinámica, solo puedes volver a cargar la página con la llamada a método GET para cambiar la orientación, pero por supuesto esta puede ser una opción más lenta. Volver a renderizar un sitio web completo con JavaScript en un dispositivo móvil muy a menudo puede incluso calentar el teléfono por lo que probé antes en mi iPhone. El motor de JavaScript es rápido y extrae mucha CPU para procesar todo sin problemas, pero también consume muchos recursos en poco tiempo, lo que dificulta que un dispositivo móvil mantenga constantemente las representaciones. El mejor ejemplo para esto es cuando se hace un juego HTML5 con llamadas de JavaScript. Un iPhone puede eventualmente calentarse como un juego en una aplicación: P.