0

Gostaria de saber como posso bloquear meu site quando visto na horizontal pelo celular, quando ele só poder ser manuseado na vertical.

Pode ser em JavaScript ou PHP porem, isso só deve acontecer com dispositivo móvel.

OBS.: Quando falo bloquear, quero dizer que vou incrementar o script para aparecer uma mensagem que informe que o uso na horizontal esta desativado.

3
  • Você está desenvolvendo um webapp pra mobile? Se não, impossivel, pois um site comum não tem acesso a configurações do usuario, e não tem como você setar isso, já que seu site não está instalado no aparelho do usuario. Pesquise por identificar modo portrait e landscape via navegador.
    – user28595
    Commented 1/03/2016 às 10:29
  • Não tem como você ter certeza se é um dispositivo móvel ou não. Tecnologias web (principalmente CSS e HTML) são fundamentalmente quebradas (usualmente são feitas por comitês de teóricos que não usam aquilo no dia a dia). Tanto que não acertaram coisas fundamentais, como saber o DPI da tela, quantidade real de pixels, orientação de elementos individuais (mal e mal dá pra usar @media + orientation, e não é 100% confiável). Infelizmente, não dá pra inovar muito pra web sem restringir público. Ou faz simples para todos, ou complica e faz só para quem tem máquina e browser novos.
    – Largato
    Commented 1/03/2016 às 10:36
  • 2
    Uma alternativa é fazer ele responsivo, veja um exemplo de site responsivo que funciona bem em qq dispositivo: motherfuckingwebsite.com
    – Largato
    Commented 1/03/2016 às 10:39

1 Resposta 1

5

Resposta original: SOen - forcing web-site to show in landscape mode only

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

<div id="wrapper">
    <!-- conteudo do seu site aqui -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

ou seja, se o usuario tentar visualizar a sua pagina que não seja em modo paisagem, irá ver uma mensagem ao invés do conteudo.

1
  • Funciona perfeitamente, mas na pergunta, ele quer bloquear na horizontal, e no caso, é só inverter landscape por portrait. Commented 23/11/2021 às 16:47

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 .