Existe alguma solução para exibir a página web sempre em portrait(retrato) em dispositivos móveis, mesmo se o usuário girar para o modo landscape(paisagem)? Ou seja, deixar travado sempre em portrait.
3 Respostas
Até o presente momento (e até onde sei) não é possível realizar esta mecânica nativamente. Existe uma proposta WebAPI chamada Screen.LockOrientation que atenderia este requisito, travando o browser em rotações específicas.
Em teoria esse comportamento pode ser emulado via media queries e a propriedade CSS Transform.
A propriedade a ser verificada via media queries é a orientation, como no exemplo abaixo:
@media (orientation: landscape) {
#content {
-webkit-transform: rotate(-90deg);
/* Firefox */
-moz-transform: rotate(-90deg);
/* IE */
-ms-transform: rotate(-90deg);
/* Opera */
-o-transform: rotate(-90deg);
/* Internet Explorer */
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
/* final spec */
transform: rotate(-90deg);
}
}
Você pode tentar rodar o corpo da sua pagina ou determinada div que envolve, no evento "orientationchange" utilizando jquery:
$(window).bind("orientationchange", function(){
var orientation = window.orientation;
var new_orientation = (orientation) ? 0 : 180 + orientation;
$('body').css({
"-webkit-transform": "rotate(" + new_orientation + "deg)", //Chrome
"-moz-transform": "rotate(" + new_orientation + "deg)", //Firefox
"-o-transform": "rotate(" + new_orientation + "deg)", //Opera
"-ms-transform": "rotate(" + new_orientation + "deg)", //IE's novos
"transform": "rotate(" + new_orientation + "deg)", //nativa
"filter": "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)" //IE's antigos
});
});
Ao invés de atribuir o evento ao "orientationchange" você pode optar também por usar o evento "resize" também funciona.
Referência:
- Resposta no SOEN
- créditos a a resposta do @OnoSendai pelo filter do IE antigo que eu havia esquecido :P
-
Grande @PauloRoberto, cara não funcionou aqui no meu código :(, vc por acaso tem um exemplo funcional ai? Commented 26/03/2014 às 17:53
Uma solução é um aviso para o usuário deixar o dispositivo em modo retrato.
Crie uma div position: fixed que cobre todo o conteúdo da página, e coloque um aviso dizendo que o site só é exibido corretamente em modo retrato. Após isso, use o seguinte código CSS para mostrar/ocultar:
@media only screen and (orientation:portrait){
#aviso { display:none; }
}
@media only screen and (orientation:landscape){
#aviso { display:block; }
}
Usei esse método em um projeto recente, e funcionou perfeitamente.
-
1
-
Bem, eu queria fazer o mesmo que você, deixar a tela travada, mas não achei outro método, só esse. Commented 21/03/2014 às 18:44
-
Legal @DianCarlos, mas estou com um problema ao usar esses orientation.. quando tem um input e sobe o teclado e trata como se fosse em formato paisagem e dai some tudo. Commented 26/03/2014 às 17:54