Estoy trabajando en una aplicación web de una sola página, que generalmente se usará en dispositivos móviles. Una de sus características es un modo de mapa, que ocupa temporalmente toda la ventana del navegador; una escala de distancia y algunos controles están unidos a las cuatro esquinas del mapa. Aquí hay una pequeña captura de pantalla del mapa para que pueda decir de qué estoy hablando:
El mapa se implementa como un <div>con position: fixedy las cuatro coordenadas cero; Asimismo, establecer temporalmente el <body>que overflow: hiddenmientras que el mapa es visible para manejar el caso de la pantalla de la aplicación subyacente que se está desplazado lejos del origen. Eso es suficiente para que el mapa funcione exactamente como quiero en los navegadores de escritorio. Los navegadores móviles también requieren que le dé una etiqueta de meta viewport con algo así "width=device-width,user-scalable=no"para que el área visible de la ventana se corresponda exactamente con la ventana gráfica.
Todo esto funcionó maravillosamente hace unos años cuando originalmente escribí esta aplicación, pero en algún punto de la línea iOS Safari dejó de honrar cualquiera de las opciones de meta viewport que implican escalado, aparentemente muchos sitios estaban aplicando mal la etiqueta, lo que resultó en un texto que era indescifrablemente pequeño, pero inzoomable Actualmente, si habilita el mapa en este navegador, es probable que obtenga una vista ligeramente ampliada, que corta esos botones a la derecha e inferior, y no puede hacer nada al respecto, porque todos los toques se interpretan como gestos de zoom / panorámica para el mapa, en lugar de desplazarse por el navegador. El mapa no es terriblemente útil sin las funciones a las que se accede a través de esos botones, y sin el botón superior derecho, ni siquiera se puede cerrar el mapa. La única salida es volver a cargar la página, lo que puede provocar la pérdida de datos no guardados.
Definitivamente voy a agregar el uso de history.pushState/ onpopstatepara que la superposición del mapa se comporte como una página separada. Podrá salir del modo de mapa utilizando el botón Atrás del navegador, pero eso no soluciona el resto de la pérdida de la funcionalidad debido a la falta de botones.
He considerado usarlo .requestFullscreen()para implementar la superposición del mapa, pero no es compatible en todas partes donde la aplicación sería utilizable. En particular, aparentemente no funciona en absoluto en iPhones, y en iPads obtienes una barra de estado y un enorme botón 'X' que superpone tu contenido; mi escala de distancia probablemente ya no sea legible. De todos modos, no es semánticamente lo que realmente quiero: necesito la ventana completa , no la pantalla completa.
¿Cómo hago para que una pantalla completa funcione en navegadores modernos? Toda la información que puedo encontrar sobre el tema habla sobre el uso de la etiqueta meta viewport, pero como mencioné, ya no funciona.