(Esta é uma pergunta com várias partes, farei o possível para resumir o cenário.)
No momento, estamos construindo um aplicativo Web responsivo (leitor de notícias) que permite que os usuários deslizem entre o conteúdo com guias, bem como rolar verticalmente dentro de cada conteúdo com guias.
Uma abordagem comum para o problema é ter um wrapper div
que preencha a janela de exibição do navegador, definido overflow
como hidden
ou auto
, em seguida, role horizontalmente e / ou verticalmente dentro dele.
Essa abordagem é ótima, mas tem uma desvantagem principal: como a altura do documento é exatamente a mesma da janela de exibição do navegador, o navegador móvel não oculta a barra de endereços / menu de navegação .
Existem inúmeras propriedades de hacks e viewport que nos permitem obter mais propriedades da tela, mas nenhuma é tão eficaz quanto minimal-ui
(introduzida no iOS 7.1).
Chegou a notícia de que o iOS 8 beta4 havia sido removido minimal-ui
do Mobile Safari (consulte a seção Webkit nas Notas de versão do iOS 8 ), o que nos deixou pensando:
Q1 Ainda é possível ocultar a barra de endereço no Mobile Safari?
Tanto quanto sabemos, o iOS 7 não responde mais ao window.scrollTo
hack, o que sugere que precisamos viver com um espaço menor na tela, a menos que adotemos um layout ou uso vertical mobile-web-app-capable
.
Q2 Ainda é possível ter uma experiência semelhante em tela cheia?
Por tela cheia suave, eu realmente quero dizer sem usar a mobile-web-app-capable
meta tag.
Nosso aplicativo da web foi desenvolvido para ser acessível, qualquer página pode ser marcada ou compartilhada usando o menu nativo do navegador. Ao adicionar mobile-web-app-capable
, impedimos que os usuários invoquem esse menu (quando ele é salvo na tela inicial), o que confunde e antagoniza os usuários.
minimal-ui
costumava ser o meio termo, ocultando o menu por padrão, mas mantendo-o acessível com um toque - embora a Apple possa removê-lo devido a outras preocupações de acessibilidade (como usuários que não sabem onde tocar para ativar o menu).
Q3 Uma experiência em tela cheia vale a pena?
Parece que uma API de tela cheia não chegará ao iOS tão cedo, mas mesmo assim, não vejo como o menu será mantido acessível (o mesmo vale para o Chrome no Android).
Nesse caso, talvez devêssemos deixar o safari móvel como está e considerar a altura da janela de visualização (para iPhone 5+, é 460 = 568 - 108, em que 108 inclui a barra do SO, a barra de endereços e o menu de navegação; para o iPhone 4 ou mais velho, é 372).
Adoraria ouvir algumas alternativas (além de criar um aplicativo nativo).