Estou trabalhando em um aplicativo Web de página única, que normalmente será usado em dispositivos móveis. Um de seus recursos é o modo de mapa, que assume temporariamente a janela inteira do navegador; uma escala de distância e alguns controles são anexados aos quatro cantos do mapa. Aqui está uma pequena captura de tela do mapa para que você possa dizer do que estou falando:
O mapa é implementado como um <div>com position: fixede todas as quatro coordenadas zero; Eu também definir temporariamente a <body>para overflow: hiddenenquanto o mapa é visível para lidar com o caso do visor aplicativo subjacente sendo rolada para longe da origem. Isso é suficiente para fazer o mapa funcionar exatamente como eu quero nos navegadores de desktop. Os navegadores móveis também exigem que eu forneça uma tag de meta viewport com algo parecido "width=device-width,user-scalable=no"para fazer com que a área visível da janela corresponda exatamente à viewport.
Tudo funcionou lindamente alguns anos atrás quando eu escrevi esse aplicativo, mas em algum momento o iOS Safari parou de honrar qualquer uma das opções de meta viewport que envolviam o dimensionamento - aparentemente muitos sites estavam aplicando mal a tag, resultando em um texto incrivelmente pequeno, ainda que não seja sustentável. Atualmente, se você ativar o mapa neste navegador, é provável que você tenha uma visualização levemente ampliada, que corta esses botões à direita e na parte inferior - e você não pode fazer nada a respeito, porque todos os toques são interpretados como gestos de zoom / panorâmica para o mapa, em vez de rolagem do navegador. O mapa não é muito útil sem os recursos acessados por esses botões - e sem o botão superior direito, você não pode nem fechar o mapa. A única saída é recarregar a página, o que pode resultar na perda de dados não salvos.
Definitivamente vou adicionar o uso de history.pushState/ onpopstatepara que a sobreposição do mapa se comporte como uma página separada. Você seria capaz de sair do modo de mapa usando o botão Voltar do navegador - mas isso não soluciona o restante da perda da funcionalidade devido à falta de botões.
Eu considerei usar .requestFullscreen()para implementar a sobreposição de mapa, mas não há suporte em todos os lugares que o aplicativo possa ser usado. Aparentemente, ele aparentemente não funciona em iPhones, e nos iPads você recebe uma barra de status e um enorme botão 'X' sobrepondo seu conteúdo - minha escala de distância provavelmente não seria mais legível. De qualquer maneira, não é semanticamente o que realmente quero - preciso da janela inteira , não da tela cheia.
Como obtenho uma exibição em janela cheia trabalhando em navegadores modernos? Todas as informações que posso encontrar sobre o assunto falam sobre o uso da tag meta viewport, mas como mencionei, isso não funciona mais.