iPad WebApp em tela inteira no Safari

83

A Apple diz na referência HTML do Safari que o código abaixo deve tornar o aplicativo da web em tela cheia no iPhone OS 2.1 e posterior.

 <meta name="apple-mobile-web-app-capable" content="yes">

Mas não parece funcionar. Existe uma maneira de ocultar a barra de título / localização no Safari em um iPad WebApp?

ipad web-applications iphone-standalone-web-app ChrisB
fonte

Respostas:

120

Isso só funciona depois que você salva um favorito do aplicativo na tela inicial. Não se você apenas navegar para o site normalmente.

Jamone
fonte
13
Se você adicionar esta metatag à sua antiga página da web url que você navegou anteriormente no Safari, você precisa atualizar o url primeiro e depois adicioná-la à tela inicial para fazer a metatag funcionar.
Scott Chu
Isso não está funcionando para mim em um projeto laravel. Eu adicionei isso ao meu modelo de layout app.blade. Isso é usado por cada uma das minhas páginas, então o cabeçalho deve (e aparece) em cada página. Ainda assim, ainda tenho barras do Safari no meu iPhone e iPad, mesmo depois de fazer muitos testes para limpar o cache, recrie o atalho da tela inicial conforme mencionado neste post. Existe algo mais que poderia impedir que as barras de safári se ocultassem? pastebin.com/iSFDXjFz aqui está a seção principal do meu arquivo app.blade.php. Desde já, obrigado.
Frantumn
14

Se você deseja permanecer em um navegador sem abrir uma nova janela, use este código HTML:

<a href="javascript:this.location = 'index.php?page=1'">
Remco de Jong
fonte
4
Isso não parece relevante para a pergunta ou tópico em questão. Talvez você possa explicar como isso se relaciona?
skeggse
6
Muito relevante. É sempre o próximo problema depois de obter a tela inteira do aplicativo da web.
camarão de
Para mim, a próxima questão é "como faço para atualizar a página agora que ela está no modo de tela inteira?"
Nick
13

  1. Primeiro, inicie o navegador Safari na tela inicial e vá para a página da web que deseja visualizar em tela inteira.

  2. Depois de localizar a página da web, toque no ícone de seta na parte superior da tela.

  3. No menu suspenso, toque na opção Adicionar à tela inicial.

  4. A janela Adicionar à página inicial deve ser exibida. Você pode personalizar a descrição que aparecerá como um título na tela inicial do seu iPad. Quando terminar, toque no botão Adicionar.

  5. Um novo ícone deve aparecer na tela inicial. Tocar no ícone abrirá a página da web no modo de tela inteira.

Nota: O ícone na tela inicial do iPad apenas abre a página marcada no modo de tela inteira. A próxima página que você visitar conterá o endereço do Safari e as barras de título. Essa forma de reproduzir sua página da web ou apresentação HTML5 no modo de tela inteira funciona se o código-fonte da página da web contiver a seguinte tag:

<meta name="apple-mobile-web-app-capable" content="yes">

Você pode adicionar esta tag à sua página da web usando uma ferramenta de terceiros, por exemplo, iWeb SEO Tool ou qualquer outra que você desejar. Observe que você precisa adicionar a tag primeiro, atualizar a página e, em seguida, adicionar um marcador à tela inicial.

Code.Town
fonte
Você poderia ter dito que esta é uma cópia direta de uma instrução encontrada em ispringsolutions.com/articles/… :-)
Jochem Schulenklopper
3
E talvez eles tenham copiado o meu. :) Veja a data em que respondi a esta pergunta e compare com a data de publicação.
Code.Town
Felicidades! Este é um tipo de você. :)
Code.Town
7

Ele apenas abre a primeira página (marcada) em tela inteira. Qualquer página seguinte será aberta COM a barra de endereço visível novamente. Qualquer meta tag que você colocar no cabeçalho da página ...

Joop Stringer
fonte
stackoverflow.com/questions/6429492/…
Alpha Codemonkey de
1

Este site tem uma solução alternativa de trabalho, mesmo efeito, usa algum javascript para definir o primeiro div filho para a altura total da janela de visualização. http://webapp-net.com/Demo/Index.html

xiática
fonte
0

Parece que a maioria das respostas neste tópico não acompanhou. O iOS Safari em iPads agora tem suporte para tela cheia e é muito fácil de implementar usando javascript.

Aqui está meu artigo completo sobre como implementar o recurso de tela cheia em seu aplicativo da web.

Marvin Danig
fonte