Bloquear web en portrait y solo visible en landscape

mensajeescrito · #1 (**permalink**) 20/08/2014, 12:00

Hola amigos a ver si me pueden echar una mano:

Como puedo hacer para que mi web solo se vea en horizontal osea landscape y bloquear el portrait o vertical.

Y que esto funcione para tablets y moviles.

Existe algun javascript o algo de jquery en este sentido?

Gracias de antemano.

Panino5001 · #2 (**permalink**) 20/08/2014, 12:41

Podrías colocar un div que ocupe toda la pantalla, con z-index alto para que cubra todo y posicionamiento absoluto o fixed, colocarle el id="portrait" y display igual a none por defecto y usar un media query como este:

Código:

@media (orientation: portrait) {
	#portrait{
		display: block;
          }
}

mensajeescrito · #3 (**permalink**) 20/08/2014, 15:12

humm no funciona.

Código CSS:

Ver original@media (orientation: portrait) {
    
    #cont_escalable_ok{ 
    
    display: block; 
    
    position:absolute;
    width:100%;
    height:100%;
    
    z-index:1000;
 
    }
    
    }

mensajeescrito · #4 (**permalink**) 20/08/2014, 15:43

acabo de dar con la solucion por si a alguien le pueda interesar o valer aquí pongo el codigo:

Código CSS:

Ver original#cont_escalable { display:block; }
         @media only screen and (orientation:portrait){
            #cont_escalable {  
                  -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){
            #cont_escalable {  
                  -webkit-transform: rotate(0deg);
                  -moz-transform: rotate(0deg);
                  -o-transform: rotate(0deg);
                  -ms-transform: rotate(0deg);
                  transform: rotate(0deg);
                 }
         }

este codigo hace girar a horizontal el contenido de un div, en este caso al contenido de la web o lo que se quisiera poner dentro.

saludos

mensajeescrito · #5 (**permalink**) 21/08/2014, 03:07

Creo que he cantado victoria demasiado pronto.

Me explico, el codigo que he puesto efectivamente funciona perfectamente. pero no es lo mismo que si esta en modo portrait por consiguiente gire 90 grados.

Que bloquear el portrait para que solo se muestre en landscope (osea evitar girar), y esto ultimo es lo que necesito pero en javascript no en css por que a dicho codigo tendria que implementarle despues yo algunas cosas mas que no vienen al caso ahora.

Y esto no se como hacerlo

Si alguien me pudiera echar una mano le estaria muy agradecido.

IsaBelM · #6 (**permalink**) 21/08/2014, 05:24

tienes un montón de información

mensajeescrito · #7 (**permalink**) 21/08/2014, 06:13

Pero que no es detectar, la orientacion, es bloquear una orientacion.

Panino5001 · #8 (**permalink**) 21/08/2014, 08:00

Es exactamente lo que hace la respuesta que puse, que es casi un estandar: se coloca una capa (div) que oculta el contenido. Esta capa suele tener un texto como este: "El modo portrait no está soportado".

IsaBelM · #9 (**permalink**) 21/08/2014, 13:34

Cita:

Iniciado por mensajeescrito

Que bloquear el portrait para que solo se muestre en landscope (osea evitar girar), y esto ultimo es lo que necesito pero en javascript no en css ........

y como piensas hacerlo sin detectar si está en panorámica o retrato antes??

Cita:

Iniciado por mensajeescrito

Pero que no es detectar, la orientacion, es bloquear una orientacion.

como te dice panino; su propuesta es correcta. tal vez no has sabido llevarla a cabo. el bloque ha de estar posicionado justamente después la etiqueta <body>

mensajeescrito · #10 (**permalink**) 22/08/2014, 04:26

Panino5001 e IsabelM, mirad:

Probe el codigo de panino para este menester pero no funciono.

Ahora bien despues me dijisteis que efectvamente el codigo de panino era el que tenia que poner para lo que necesitaba.

Asi que relei el segundo post, osea el de panino y oh!! sorpresa ¿a ver si veis el error?.

Cuando me escribiste el post me dijiste:

"Podrías colocar un div que ocupe toda la pantalla, con z-index alto para que cubra todo y posicionamiento absoluto o fixed, colocarle el id="portrait" y display igual a none por defecto y usar un media query como este:"

Si te fijas pones el display en none.

Pero luego en el codigo en vez de ponerlo en none, lo pusiste en block

osea pusite esto:

Código CSS:

Ver original@media (orientation: portrait) {
    #portrait{
        display: block;
          }
}

Por eso no funcionaba.

Pero ya he adaptado el codigo que me has aconsejado, panino, poniendolo en none .

Y funciona perfectamente, gracias a los dos, isabel y panino por ayudarme.

mensajeescrito · #11 (**permalink**) 22/08/2014, 04:45

humm una cosa que parece una tonteria pero no lo es:

¿ Como dices, panino, que se puede poner un mesaje del estilo "El modo portrait no esta soportado",

Si dicho div esta en display none?

Al estar en display none no deja ni ver la pagina ni tampoco este

mensaje de : el modo portrait no esta soportado.

De que forma puedo poner este mensaje de aviso entonces?

ok no he dicho nada, el mensaje hay que ponerlo fuera en otro div y jugar con el z-index para mostrar el mensaje.

Espero a alguien pueda servirle mi auto duda aclarada ejejejejej

Panino5001 · #12 (**permalink**) 22/08/2014, 07:34

Me alegra haberte confundido y que te sirviera