85

Quero mostrar meu site apenas no modo paisagem, é possível? Não importa a orientação do dispositivo na mão do usuário, mas o site sempre estará no modo paisagem. Eu vi um aplicativo para iPhone funcionando assim, mas isso pode ser feito para um site?

javascript html mobile-browser

— coure2011
fonte

3

Boa pergunta, mas aposto que a resposta é "Não é possível", embora você possa meio que trapacear: stackoverflow.com/a/4807047/615754 .

— nnnnnn

Na verdade não. Você pode fingir usando transformações css, mas é feio, e não acho que haja uma maneira de saber se está de cabeça para baixo no android. Tenho certeza de que isso já foi discutido aqui antes.

— Dagg Nabbit

1

é possível forçar o site a ter largura mínima: 320px? portanto, se o tamanho da tela for de resolução inferior, o usuário precisará rolar para ver o site inteiro. Ou posso ampliar a largura de 240px para conteúdo de 320px?

— coure2011

Não tenho certeza de como este link pode ser útil para você, mas os recursos mais recentes [janeiro de 2020] sugerem uma nova API para bloqueio de orientação do W3C w3c.github.io/screen-orientation

— Sarath Sajan

117

@Golmaal realmente respondeu isso, estou apenas sendo um pouco mais prolixo.

<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">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

Você não tem controle sobre o usuário movendo a orientação, no entanto, você pode pelo menos enviar uma mensagem a ele. Este exemplo irá ocultar o invólucro se estiver no modo retrato e mostrar a mensagem de aviso e, em seguida, ocultar a mensagem de aviso no modo paisagem e mostrar o retrato.

Não acho que essa resposta seja melhor do que @Golmaal, apenas um elogio a ela. Se você gostou desta resposta, certifique-se de dar o crédito a @Golmaal.

Atualizar

Tenho trabalhado muito com o Cordova recentemente e descobri que você PODE controlá-lo quando tem acesso aos recursos nativos.

Outra atualização

Então, depois de lançar Cordova, é realmente terrível no final. É melhor usar algo como React Native se você quiser JavaScript. É realmente incrível e sei que não é pura web, mas a experiência pura da web em dispositivos móveis meio que falhou.

— Jason Sebring
fonte

fez o meu dia! este é um script realmente útil para forçar o modo paisagem em pequenos dispositivos, colocando uma boa mensagem.

— dhruvpatel

você recebeu a maior parte do crédito;) + 1d por sua resposta bem descrita e @Golmaal ..

— Hitesh Misro

Muito útil, obrigado! É importante notar que isso não parece funcionar se você colar em uma folha de estilo separada.

— Mmm

Sua resposta é melhor do que a que você referiu. Você fornece uma solução real e recomenda um aviso facilmente implementado em vez de algo mais criativo e problemático. A outra "resposta" pode ter inspirado você, mas foi mais ou menos apenas uma pergunta em voz alta. Teria sido melhor como um comentário mencionando a existência da orientationpropriedade do grupo condicional.

— Vince

46

Enquanto eu mesmo estaria aqui esperando uma resposta, me pergunto se isso pode ser feito via CSS:

@media only screen and (orientation:portrait){
#wrapper {width:1024px}
}

@media only screen and (orientation:landscape){
#wrapper {width:1024px}
}

— Golmaal
fonte

35

Tente isto Pode ser mais apropriado para você

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

<div id="container">
    <!-- your html for your website -->
    <H1>This text is always in Landscape Mode</H1>
</div>

Expandir snippet

Isso irá gerenciar automaticamente a rotação uniforme.

— Sr. A
fonte

8

Inteligente, mas realmente não funciona. Grande parte da página fica inacessível quando é girada, porque apenas o conteúdo é girado e não o navegador real.

— Graham

3

Isso quebraria qualquer animação e provavelmente destruiria a capacidade de resposta móvel da página.

— Wissam El-Kik

2

Tive que brincar com as larguras dos meus contêineres principais:

html {
  @media only screen and (orientation: portrait) and (max-width: 555px) {
    transform: rotate(90deg);
    width: calc(155%);
    .content {
      width: calc(155%);
    }
  }
}

— Kraken
fonte

boa ideia .. algum artefatos / ruído ao alternar entre retrato / paisagem?

— hko

forçando o site a mostrar apenas no modo paisagem

@Golmaal realmente respondeu isso, estou apenas sendo um pouco mais prolixo.