Tema
- #Compatibilidad entre navegadores
- #Web móvil
Dos problemáticos problemas de cross-browsing que encontré al desarrollar una web móvil, y otros problemas que se deben considerar
Quiero registrarlos.
Problema de cálculo de la altura del viewport debido a la barra de direcciones y la barra de navegación del propio navegador
Safari y Samsung Internet tienen una barra de navegación inferior integrada en el navegador. A menos que se configure específicamente show/hide, aparece al desplazarse hacia abajo y desaparece al desplazarse hacia arriba.
El problema es que esto hace que el viewport no sea fijo y cambie.
Por ejemplo, si se establece la altura en 100vh, el diseño se dibujará correctamente si no hay una barra de navegación, pero si aparece la barra de navegación, esta ocultará la interfaz de usuario.
Para solucionar este problema
1. Usar dvh.
Dvh es un viewport dinámico que refleja automáticamente los cambios cada vez que cambia la altura del viewport. Por lo tanto, es posible responder a los cambios en el diseño de la interfaz de usuario según la presencia o ausencia de la barra de direcciones o la barra de navegación inferior.
2. También se puede considerar svh.
Svh es la altura del área de la interfaz de usuario, excluyendo la barra de direcciones o la navegación. En situaciones en las que se espera que aparezcan la barra de direcciones o la navegación, es más preciso usar svh.
Problema de desplazamiento de la interfaz de usuario debido al teclado virtual al seleccionar (enfocar) la entrada
En Safari móvil, cuando se seleccionó la entrada, surgió un problema en el que los elementos de la interfaz de usuario existentes se desplazaban debido al teclado virtual. En otros navegadores, el teclado virtual generalmente aparece de forma absoluta, pero en la web móvil de Safari, parecía ocupar espacio como si se hubiera aplicado display block.
En Safari, este es un problema que ocurre cuando la altura del viewport se ajusta dinámicamente cuando aparece el teclado virtual, y los elementos que usan la unidad vh se reajustan. Para solucionar esto,
1. Usar min-height.
Fija la altura para evitar que la interfaz de usuario se desplace.
2. Aplicar prefijos de proveedor (se describe más adelante).
Se inserta un atributo que se aplica a navegadores específicos como Safari.
3. Controlar dinámicamente el viewport con JavaScript.
* No se recomienda este método. El diseño parpadea porque la altura de desplazamiento se mueve instantáneamente.
Se agrega un evento resize para detectar cuándo cambia el viewport y se aplica el estilo apropiado.
3-1. Controlar la posición cuando ocurre el evento focusin.
3-2. Controlar la posición cuando aparece el teclado virtual. (En el ejemplo siguiente, se aplica una clase)
Lo más deseable es resolverlo completamente solo con CSS, pero si no se puede resolver con los ejemplos anteriores, debe verificar si es un elemento con position: absolute o fixed, y luego modificar el CSS eliminando los atributos top, right, left y bottom.
Otros
Además, busqué algunos puntos a considerar al desarrollar una web móvil en Safari.
1. Usar prefijos de proveedor al usar algunos atributos.
* Un prefijo de proveedor es un prefijo que permite que un navegador comprenda y represente un atributo CSS específico, y hace que el CSS implementado de manera diferente por cada navegador se aplique según lo previsto. Esto permite la consistencia entre los mismos navegadores y la compatibilidad con navegadores antiguos.
Tipos
-webkit-: Chrome, Safari, etc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer y Edge
-o-: Opera
Los atributos típicos que requieren prefijos de proveedor son los siguientes.
Además, Safari limita la capacidad de LocalStorage y SessionStorage a aproximadamente 5 MB, y no comparte el espacio de almacenamiento entre las pestañas, por lo que es necesario tener cuidado.
Comentarios0