I miei problemi di cross-browsing (principalmente Safari)

Due problematiche di cross-browsing piuttosto scomode incontrate durante lo sviluppo di un sito web mobile e altri problemi da considerare

sono qui documentati.

Problema di calcolo dell'altezza del viewport dovuto alla barra degli indirizzi e alla barra di navigazione del browser stesso

Safari e Samsung Internet hanno una barra di navigazione inferiore integrata nel browser. A meno che non siano state impostate opzioni specifiche per mostrarla/nasconderla, appare scorrendo verso il basso e scompare scorrendo verso l'alto.

Il problema è che a causa di queste barre il viewport non è fisso ma cambia.

Ad esempio, se si imposta l'altezza a 100vh, quando la barra di navigazione non è presente il layout viene visualizzato correttamente, ma quando la barra di navigazione appare, copre l'interfaccia utente.

Per risolvere questo problema

1. Utilizzare dvh.

dvh è un viewport dinamico che riflette automaticamente i cambiamenti ogni volta che l'altezza del viewport cambia. Pertanto, è possibile gestire i cambiamenti del layout dell'interfaccia utente a seconda della presenza o meno della barra degli indirizzi o della barra di navigazione inferiore.

2. È possibile considerare anche svh.

svh è l'altezza dell'area UI pura, escludendo la barra degli indirizzi o la barra di navigazione. In situazioni in cui è previsto che appaiano la barra degli indirizzi o la barra di navigazione, è più preciso utilizzare svh.

Problema di spostamento dell'interfaccia utente a causa della tastiera virtuale quando si seleziona (focus) l'input

Su Safari mobile, quando si selezionava l'input, si verificava un problema in cui gli elementi UI esistenti venivano spostati a causa della tastiera virtuale. Su altri browser, la tastiera virtuale appare generalmente in modo assoluto, ma sul web mobile Safari occupa spazio come se fosse applicato display block.

Safari regola dinamicamente l'altezza del viewport quando viene visualizzata la tastiera virtuale, causando problemi con gli elementi che utilizzano unità vh. Per risolvere questo problema,

1. Utilizzare min-height.

Fissare l'altezza per evitare lo spostamento dell'interfaccia utente.

2. Applicare il prefisso vendor. (Descrizioni successive)

Inserire l'attributo applicato a browser specifici come Safari.

3. Controllare dinamicamente il viewport con JavaScript.

* Questo metodo non è consigliato. Lo spostamento improvviso dell'altezza di scorrimento fa lampeggiare il layout.

Utilizzare l'evento resize per rilevare i cambiamenti nel viewport e applicare lo stile appropriato.

3-1. Controllare la posizione quando si verifica l'evento focusin.

3-2. Controllare la posizione quando appare la tastiera virtuale. (Nell'esempio seguente, viene applicata la classe)

È preferibile risolvere completamente il problema solo con CSS, ma se ciò non è possibile con i casi sopra descritti, è necessario verificare se l'elemento è position: absolute o fixed e rimuovere gli attributi top, right, left, bottom modificando il CSS.

Altro

Inoltre, ho cercato alcune considerazioni da tenere a mente quando si sviluppa un sito web mobile per Safari.

1. Quando si utilizzano alcuni attributi, utilizzare il prefisso vendor.

* Il prefisso vendor è un prefisso che consente al browser di comprendere e rendere correttamente un attributo CSS specifico, e fa sì che il CSS implementato in modo diverso per ogni browser venga applicato come previsto. Questo garantisce coerenza tra browser e compatibilità con browser meno recenti.

Tipi

-webkit-: Chrome, Safari, ecc.
-moz-: Mozilla Firefox
-ms-: Internet Explorer ed Edge
-o-: Opera

Gli attributi tipici che richiedono un prefisso vendor sono i seguenti.

Inoltre, Safari limita la capacità di LocalStorage e SessionStorage a circa 5 MB e non condivide lo spazio di archiviazione tra le schede, quindi è necessario prestare attenzione.