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?
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:
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.json
arquivo.
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.
screen.orientation.lock('landscape');
Irá forçá-lo a mudar para e permanecer no modo paisagem. Testado no Nexus 5.
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;
}
}
landscape
para portrait
e funciona como esperado@media screen and (orientation: portrait)
portrait
(para que possa mudar para landscape
).
vh
para vw
e vw
para vh
em todos os arquivos CSS (em modo retrato) ... por isso, se alguém não foi bem sucedida provavelmente por causa disso.
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!