¿Hay alguna manera de forzar el diseño horizontal/horizontal en los dispositivos móviles?

Question

Estoy construyendo una versión móvil de un sitio web, y en este caso específico se vería perfecto en el diseño horizontal. ¿Hay alguna manera de forzar este diseño sin importar la configuración del usuario?

Se agradece la respuesta de alguna manera universal, pero también si sabes cómo lograrlo en cualquier plataforma específica (iPhone, Android ...) así que tal vez podamos recopilar un conjunto de reglas decente para la mayoría de usuarios móviles.

Answer 1

Hay un truco que logrará esto, pero desaconsejo seriamente su uso: su diseño debe adaptarse a si alguien está en modo retrato o paisaje.

Paso 1: consultar la propiedad window.orientation para ver si está en modo horizontal o vertical

Paso 2: Si se encuentra en el modo de retrato utilizar un -webkit-transform rotación (-90) en un div eso está envolviendo toda tu página para forzarla en un diseño de paisaje.

Esto no funcionará correctamente: la interfaz de usuario del navegador seguirá estando en modo vertical, pero es de suponer que el usuario supondrá que debe girar el teléfono de nuevo al modo horizontal para ver el contenido. Esto es increíblemente molesto para los usuarios; probablemente haya una buena razón para que intenten leer su sitio en modo retrato.

Answer 2

Trate de añadir este meta a su <cabeza>

<meta name="viewport" content="width=480"> 

La presencia de una barra de desplazamiento horizontal en el modo vertical, dará una señal al usuario de que él/ella tiene que girar en el paisaje. No puedo ver muchos casos de uso para esto, pero he visto esto para algunos juegos y aplicaciones de mapeo, por lo que no es del todo malo.