Se presentan soluciones para los problemas de compatibilidad entre navegadores que surgen en el navegador Safari durante el desarrollo web móvil, como el cálculo de la altura de la ventana gráfica y el desplazamiento de la interfaz de usuario debido al teclado virtual.
El problema de la altura de la ventana gráfica se puede resolver utilizando dvh o svh; el problema del teclado virtual se puede solucionar utilizando min-height, prefijos de proveedor, y control dinámico mediante JavaScript.
Al desarrollar para Safari móvil, se deben considerar el uso de prefijos de proveedor, las limitaciones de capacidad de LocalStorage y SessionStorage (aproximadamente 5 MB) y la imposibilidad de compartir el almacenamiento entre pestañas.
¡Escribí con mucho empeño y al pulsar guardar, apareció un error 404 y se perdió todo! ㅠㅠ
Quiero documentar dos problemas molestos de cross-browsing que encontré al desarrollar una web móvil, y otros problemas que deben considerarse.
Quiero registrarlos.
Problema de cálculo de la altura del viewport debido a la barra de direcciones y la barra de navegación del navegador
Safari e Internet de Samsung 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 representa correctamente cuando no hay una barra de navegación, pero si aparece la barra de navegación, esta oculta 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 pura, 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 input
En Safari móvil, al seleccionar input, 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 normalmente aparece de forma absoluta, pero en Safari móvil, parece ocupar espacio como si se hubiera aplicado display block.
En Safari, este es un problema que ocurre cuando Safari ajusta dinámicamente la altura del viewport cuando aparece el teclado virtual, haciendo que los elementos que usan unidades vh se reajusten. Para solucionar esto,
1. Usar min-height.
Fija la altura para evitar que la interfaz de usuario se desplace.
html, body{height:100%;min-height:100vh;/* Se establece una altura mínima fija */overflow: hidden;}
2. Aplicar prefijos de proveedor (se describe más adelante)
html, body{height: -webkit-fill-available;/* Compatibilidad con Safari */}
Se inserta un atributo que se aplica a navegadores específicos como Safari.
3. Controlar dinámicamente el viewport con JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Código a ejecutar cuando aparece el tecladodocument.body.classList.add('keyboard-visible');}else{// Código a ejecutar cuando desaparece el tecladodocument.body.classList.remove('keyboard-visible');}});
Se utiliza el evento resize para detectar cuándo cambia el viewport y se aplica el estilo adecuado.
3-1. Controlar la posición cuando se produce el evento focusin.
3-2. Controlar la posición cuando aparece el teclado virtual (en el ejemplo siguiente, se aplica una clase).
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Estado en el que aparece el teclado virtualdocument.body.classList.add('keyboard-visible');}else{// Estado en el que desaparece el teclado virtualdocument.body.classList.remove('keyboard-visible');}});
En mi caso, lo resolví usando el método 3-1. Si el método 3-1 no funciona como se espera, primero usa el código siguiente para verificar si es lo que se pretende.
Además, encontré algunos puntos a considerar al desarrollar una web móvil para Safari.
1. Usar prefijos de proveedor al usar algunos atributos.
* Los prefijos de proveedor son prefijos que permiten que un navegador comprenda y renderice un atributo css específico, y hacen que el css implementado de manera diferente en cada navegador se aplique como se pretende. Esto permite una 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 que suelen necesitar 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 pestañas, por lo que es necesario tener cuidado.
P.D.: Estoy muy triste porque el artículo que escribí originalmente se perdió. Aunque el artículo que publiqué no es de alta calidad,,,ㅠ debo guardar temporalmente.