Per risolvere i problemi di cross-browsing riscontrati nel browser Safari durante lo sviluppo web mobile, sono state proposte soluzioni per il calcolo dell'altezza del viewport e per lo spostamento dell'interfaccia utente causato dalla tastiera virtuale.
Il problema dell'altezza del viewport può essere risolto utilizzando dvh o svh, mentre il problema della tastiera virtuale può essere risolto utilizzando min-height, prefissi vendor e controllo dinamico tramite JavaScript.
Durante lo sviluppo web mobile per Safari, è necessario considerare l'utilizzo di prefissi vendor, le limitazioni di capacità di LocalStorage e SessionStorage (circa 5 MB) e l'impossibilità di condividere lo Storage tra le schede.
Ho scritto con impegno un articolo e poi, al momento di salvarlo, è apparso un errore 404 e tutto è andato perso ㅠㅠ
Voglio documentare due fastidiosi problemi di cross-browsing che ho incontrato durante lo sviluppo di un sito web mobile e altri problemi da considerare.
Voglio registrarli.
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 sia stata impostata una specifica funzione show/hide, appare quando si scorre verso il basso e scompare quando si scorre verso l'alto.
Il problema è che a causa di questi elementi il viewport non è fisso ma cambia.
Ad esempio, se si imposta l'altezza a 100vh, il layout viene disegnato correttamente in assenza della barra di navigazione, ma se la barra di navigazione appare, essa sovrappone l'interfaccia utente.
Per risolvere questo problema,
1. Usare dvh.
Il dvh è un viewport dinamico che riflette automaticamente i cambiamenti ogni volta che l'altezza del viewport viene modificata. Pertanto, è possibile gestire i cambiamenti nel 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.
L'svh è l'altezza dell'area dell'interfaccia utente pura, esclusa la barra degli indirizzi o la barra di navigazione. In situazioni in cui ci si aspetta che appaiano la barra degli indirizzi o la barra di navigazione, è più preciso utilizzare svh.
Problema di spostamento dell'interfaccia utente dovuto alla tastiera virtuale quando si seleziona l'input
Su Safari mobile, quando ho selezionato l'input, si è verificato un problema in cui gli elementi dell'interfaccia utente esistenti venivano spostati a causa della tastiera virtuale. Su altri browser, la tastiera virtuale appare generalmente in modo assoluto, ma su Safari mobile web, occupa spazio come se fosse applicato display block.
Safari regola dinamicamente l'altezza del viewport quando la tastiera virtuale appare, causando problemi con gli elementi che usano unità vh. Per risolvere questo problema,
1. Usare min-height.
Fissare l'altezza per evitare lo spostamento dell'interfaccia utente.
html, body{height:100%;min-height:100vh;/* Impostazione dell'altezza minima fissa */overflow: hidden;}
2. Applicare il prefisso del vendor. (Spiegato più avanti)
html, body{height: -webkit-fill-available;/* Compatibilità con Safari */}
Inserire l'attributo applicato a browser specifici come Safari.
3. Controllare dinamicamente il viewport con JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Codice da eseguire quando la tastiera apparedocument.body.classList.add('keyboard-visible');}else{// Codice da eseguire quando la tastiera scomparedocument.body.classList.remove('keyboard-visible');}});
Aggiungere un listener all'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 una classe)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Stato in cui la tastiera virtuale è sollevatadocument.body.classList.add('keyboard-visible');}else{// Stato in cui la tastiera virtuale è abbassatadocument.body.classList.remove('keyboard-visible');}});
Nel mio caso, ho risolto usando il metodo 3-1. Se il metodo 3-1 non funziona come previsto, verificare prima usando il codice seguente se l'intenzione è corretta.
Ho anche cercato altre considerazioni da tenere presenti quando si sviluppa un sito web mobile per Safari.
1. Quando si utilizzano alcuni attributi, usare i prefissi del vendor.
* I prefissi del vendor sono prefissi che consentono al browser di comprendere e rendere un determinato attributo css, consentendo l'applicazione corretta di css implementati in modo diverso da browser a browser. Ciò garantisce coerenza tra browser e compatibilità anche con browser più vecchi.
Tipi
-webkit-: Chrome, Safari, ecc. -moz-: Mozilla Firefox -ms-: Internet Explorer ed Edge -o-: Opera
Di seguito sono riportati gli attributi tipici che richiedono i prefissi del vendor.
.container{display: -webkit-flex;/* Safari */display: flex;-webkit-flex-direction: row;flex-direction: row;}.item{-webkit-flex-grow:1;/* Safari */flex-grow:1;-webkit-flex-shrink:1;/* Safari */flex-shrink:1;}.grid-container{display: -ms-grid;/* IE11 e browser più vecchi */display: grid;/* Browser più recenti */}.sticky-element{position: -webkit-sticky;/* Safari */position: sticky;}input[type="text"],select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
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.
ps. Sono molto triste perché l'articolo che avevo scritto è andato perso. L'articolo che ho pubblicato non è di alta qualità,,,ㅠ Devo assolutamente salvare i lavori in corso.