¿Cómo hacer que una web se abra en horizontal al acceder con el móvil?

Hola tengo una pagina web donde pongo mis fotos. ¿Alguien me podría decir cómo puedo hacer que cuando abra mi pagina web en un dispositivo móvil se vea en horizontal toda la página? ¿se puede hacer?

Gracias.

Respuestas

Sí que se puede hacer, pero hoy en día sólo podrás conseguirlo con hacks poco fiables o con características que no están soportadas en todos los navegadores.

La única manera correcta de hacerlo sería utiliza la nueva API Screen.lockOrientation(), que le pide permiso al usuario para bloquear una determinada orientación de pantalla. El problema es que sólo lo soporta Internet Explorer 11 y las últimas versiones de Chrome y Firefox. Eso significa que no podrías usarlo en casi ningún iPhone.

La forma más sucia de hacerlo sería utilizar un código CSS como el que se muestra en esta respuesta de StackOverflow:

<!DOCTYPE HTML>
 <html>
   <head>
     <style type="text/css">
         #container { display:block; }
         @media only screen and (orientation:portrait){
            #container {  
                  -webkit-transform: rotate(90deg);
                  -moz-transform: rotate(90deg);
                  -o-transform: rotate(90deg);
                  -ms-transform: rotate(90deg);
                  transform: rotate(90deg);
                 }
 
         }
         @media only screen and (orientation:landscape){
            #container {  
                  -webkit-transform: rotate(0deg);
                  -moz-transform: rotate(0deg);
                  -o-transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  transform: rotate(0deg);
                 }
         }
    </style>
  </head>
  <body>
      <div id="container">
           <h1> Este texto siempre se ve en una pantalla horizontal </h1>
      </div>
  </body>
</html>

Y esta es otra forma de hacerlo mediante JavaScript y que parece que tiene un resultado más bonito:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

Por último, una solución de compromiso que funciona en todos los móviles y que no utiliza hacks consiste en mostrar un mensaje de aviso si el usuario no tiene el móvil en horizontal y ocultarlo si lo tiene:

<style type="text/css">
    #aviso-movil-horizontal { display: none; }
    @media only screen and (orientation:portrait) {
        #wrapper { display:none; }
        #aviso-movil-horizontal { display:block; }
    }
    @media only screen and (orientation:landscape) {
        #aviso-movil-horizontal { display:none; }
    }
</style>
 
// ...
 
<div id="aviso-movil-horizontal">
    Por favor, coloca tu móvil en horizontal.
</div>
 
<div id="wrapper">
    CONTENIDO NORMAL DEL SITIO WEB
</div>

@javiereguiluz

4 noviembre 2014, 9:24

@javiereguiluz Muchisimas Gracias!!!!

@paratusblogs

4 noviembre 2014, 22:37