4

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 3

4

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);
    }

}
4

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
1
  • 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
0

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.

3
  • 1
    "Meio" agressivo esse método, né? Commented 21/03/2014 às 18:33
  • 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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .