Forçar modo de orientação “paisagem”


93

Estou tentando forçar o modo "paisagem" do meu aplicativo porque meu aplicativo não foi projetado para o modo "retrato". Como eu posso fazer isso?

Respostas:


95

Agora é possível com o manifesto do webapp HTML5. Ver abaixo.


Resposta original:

Você não pode bloquear um site ou aplicativo da web em uma orientação específica. Isso vai contra o comportamento natural do dispositivo.

Você pode detectar a orientação do dispositivo com consultas de mídia CSS3 como este:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Ou vinculando um evento de mudança de orientação de JavaScript como este:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

Atualização em 12 de novembro de 2014: agora é possível com o manifesto do webapp HTML5.

Conforme explicado em html5rocks.com , agora você pode forçar o modo de orientação usando um manifest.jsonarquivo.

Você precisa incluir essas linhas no arquivo json:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

E você precisa incluir o manifesto em seu arquivo html assim:

<link rel="manifest" href="manifest.json">

Não tenho certeza de qual é o suporte no manifesto do webapp para o modo de orientação de bloqueio, mas o Chrome está definitivamente lá. Será atualizado quando eu tiver a informação.


1
Sim, aplicativos da web também. Mesmo se você "salvar" seu site na tela inicial do iPhone ou iPad, o webapp mudará sua orientação.
Rémi Breton

2
De acordo com caniuse.com, os manifestos podem ser usados ​​desde o Android 4.1. Veja caniuse.com/#feat=offline-apps
Rémi Breton

1
Como posso saber se o manifesto está sendo chamado? Não está funcionando para mim e nada parece ser carregado na Rede de minhas ferramentas de desenvolvimento apesar do manifesto estar no mesmo lugar que o index.html onde está vinculado.
Ian S

3
No Chrome, agora você pode verificar a guia "Aplicativo" no modo Inspecionar, há uma página "Manifesto" com um link direto para o seu arquivo json e informações sobre ele.
drskullster

1
@ RémiBreton - você ainda está procurando por essas informações, então pode atualizar? Há anos que esperamos pacientemente !
ashleedawg

47
screen.orientation.lock('landscape');

Irá forçá-lo a mudar para e permanecer no modo paisagem. Testado no Nexus 5.

http://www.w3.org/TR/screen-orientation/#examples


3
Não funciona no Android usando o navegador de internet padrão (não o Chrome) - alguma ideia?
Antonios Tsimourtos

7
Não implementado para Safari (iOS e macOS): caniuse.com/#feat=screen-orientation
MBach

4
Apenas uma nota rápida, isso só funciona depois de entrar no modo de tela cheia.
Thane Brimhall

2
Este método não é recomendado pela Mozilla: developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation Também tem uma compatibilidade de navegador muito pobre
Fernando Garcia

1
Isso nem funciona no modo de tela inteira no Chrome: |
Shamshirsaz.Navid

24

Eu uso alguns css como este (baseado em truques de css ):

@media screen and (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    height: 100vw;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
}

3
Usei esta resposta ... tudo o que tenho que fazer é mudar a consulta de mídia de landscapepara portraite funciona como esperado@media screen and (orientation: portrait)
ymz

Editou a resposta para ajudar os futuros. A rotação deve ser aplicada quando o modo atual é portrait(para que possa mudar para landscape).
lfarroco

Obrigado. Eu estive procurando por algo assim.
azarão

Como eu poderia aplicá-lo apenas em uma única página por meio de page-id-xxx?
Homero

1
Obrigado por isso! Descobri que você precisa mudar todo vhpara vwe vwpara vhem todos os arquivos CSS (em modo retrato) ... por isso, se alguém não foi bem sucedida provavelmente por causa disso.
tomer raitz

0

Tive o mesmo problema, estava faltando um arquivo manifest.json, caso não encontrasse o navegador decide com a orientação é o mais adequado, caso não especifique o arquivo ou use um caminho errado.

Corrigi apenas chamar o manifest.json corretamente em cabeçalhos html.

Meus cabeçalhos html:

<meta name="application-name" content="App Name">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="manifest" href="manifest.json">
<meta name="msapplication-starturl" content="/">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#">
<meta name="msapplication-TileColor" content="#">
<meta name="msapplication-config" content="browserconfig.xml">
<link rel="icon" type="image/png" sizes="192x192" href="android-chrome-192x192.png">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#ffffff">
<link rel="shortcut icon" href="favicon.ico">

E o conteúdo do arquivo manifest.json:

{
  "display": "standalone",
  "orientation": "portrait",
  "start_url": "/",
  "theme_color": "#000000",
  "background_color": "#ffffff",
  "icons": [
  {
    "src": "android-chrome-192x192.png",
    "sizes": "192x192",
    "type": "image/png"
  }
}

Para gerar seus favicons e ícones, use esta ferramenta da web: https://realfavicongenerator.net/

Para gerar seu arquivo de manifesto, use: https://tomitm.github.io/appmanifest/

Meu PWA funciona muito bem, espero que ajude!

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.