4

Tenho um site que gostaria de travar sua posição no screen quando acessado de um dispositivo móvel, impedindo que ele girasse ou rotacionasse junto com o celular.

Existe algum código em JavaScript que faça isso? Bloquear a rotação da tela como se fosse um aplicativo?

5
  • Parece que a API que permitiria isso ainda é experimental e sem suporte. Ver stackoverflow.com/questions/5298467/… (em inglês) para uma possível alternativa. Ver também gist.github.com/visnup/2605440 (parece uma solução mais simples).
    – bfavaretto
    Commented 22/05/2014 às 19:49
  • Infelizmente, com a tecnologia web que temos, isso ainda não é possível, porque não é controlado pelo site em questão, mas sim pelas configurações do aparelho e o site não tem o poder de interferir nisso como se fosse um aplicativo. Isso seria uma brecha de segurança, caso ocorresse. Commented 22/05/2014 às 20:11
  • Isso é possível sim. Entre em mcdonalds.com.br/favoritos e veja que você só pode usar na horizontal Commented 22/05/2014 às 20:26
  • Porque você não usa algo como calcular a resolução? Muitos smartphones utilizam 480 x 854 pixels. Você pode, por exemplo, se a resolução for menor que 500 px, exibir uma mensagem para rotacionar a tela. Commented 22/05/2014 às 20:30
  • Oi bfavaretto, obrigada pela ajuda. Estava testando os códigos que vc passou e eles não funcionam para a orientation landscape, que era o que eu realmente precisava... Tentei no mais simples: @media (orientation: landscape) { body { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -o-transform: rotate(-90deg); -ms-transform: rotate(-90deg); transform: rotate(-90deg); } } Mas nao funcionou...
    – user8864
    Commented 22/05/2014 às 21:12

1 Resposta 1

2

As cores são só para você ter uma ideia. Isso não pareceu muito bom, pelo menos no meu Moto X (Chrome, Android 4.4).

<html>
    <head>
        <meta charset='utf-8' />
        <title>Teste de orientação no mobile</title>
        <style>
            #wrapper { width: 400px; height: 400px; }
            #wrapper.paisagem { -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); background-color: lightgreen; }
            #wrapper.retrato { background-color: lightblue; }
        </style>
        <script>
            window.addEventListener('orientationchange', function(){     // funciona com addEventListener('resize', ...) também!
                if(window.innerHeight > window.innerWidth) document.getElementById('wrapper').className = 'retrato';
                else document.getElementById('wrapper').className = 'paisagem';
            });

            window.addEventListener('load', function(){
                document.getElementById('wrapper').className = 'retrato';
            });
        </script>
    </head>
    <body>
        <div id='wrapper'>
            <h2>Teste de orientação no mobile</h2>
            <p>
                Gire para ver.
            </p>
        </div>
    </body>
</html>

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 .