A cross-böngészős problémáim (főleg Safari)

Mobil webfejlesztés során tapasztalt két bosszantó cross-böngészési probléma és egyéb figyelembe veendő kérdések leírása.

Dokumentálom ezeket.

A böngésző saját címsorával és navigációs sávjával kapcsolatos viewport-magasság számítási probléma

A Safari és a Samsung Internet böngészők saját alsó navigációs sávval rendelkeznek. Hacsak nincs külön show/hide beállítás, görgetéskor megjelenik, görgetés felfelé pedig eltűnik.

A probléma az, hogy emiatt a viewport nem rögzített, hanem változik.

Például, ha a magasságot 100vh-ra állítjuk, navigációs sáv hiányában a layout pontosan megjelenik, de ha a navigációs sáv megjelenik, akkor az eltakarja a felhasználói felületet.

Ennek a probléma megoldásához

1. dvh használat.

A dvh dinamikus viewport, amely automatikusan tükrözi a változásokat a viewport magasságának változásakor. Így lehetséges a felhasználói felület elrendezésének módosítására reagálni a címsor vagy az alsó navigáció jelenlétének függvényében.

2. svh is figyelembe vehető.

Az svh a címsor és a navigáció nélküli, tiszta UI terület magassága. Címsor vagy navigáció megjelenésének várható helyzetekben az svh használata pontosabb.

Az input kiválasztásakor (fókusz) a virtuális billentyűzet okozta UI-eltolódás problémája

Mobil Safari böngészőben az input kiválasztásakor a virtuális billentyűzet miatt a meglévő UI elemek eltolódtak. Más böngészőkben a virtuális billentyűzet általában abszolút módon jelenik meg, de a Safari mobil webes változatában úgy tűnt, mintha display block stílust alkalmaztak volna, és helyet foglalt.

A Safari a viewport magasságát dinamikusan állítja be a virtuális billentyűzet megjelenésekor, ami a vh egységet használó elemek újraszámítását eredményezi, és ez okozza a problémát. Ennek megoldásához,

1. min-height használat.

A magasság rögzítése megakadályozza a UI eltolódását.

2. Szállítófüggő prefixumok alkalmazása (részletesebben később).

A Safari és egyéb böngészőkben alkalmazható attribútumok beillesztése.

3. A viewport dinamikus vezérlése JavaScript segítségével.

* Ezt a módszert nem ajánljuk. A görgetési magasság hirtelen változása miatt a layout villog.

A resize esemény figyelésével érzékeljük a viewport változását, és megfelelő stílust alkalmazunk.

3-1. A focusin esemény bekövetkezésekor a pozíció vezérlése.

3-2. A virtuális billentyűzet megjelenésekor a pozíció vezérlése (az alábbi példában osztály alkalmazásával).

A CSS-sel történő teljes megoldás a legcélszerűbb, de ha a fentiek nem oldják meg a problémát, akkor ellenőrizze, hogy a position: absolute vagy fixed tulajdonságú elemek-e, és távolítsa el a top, right, left, bottom attribútumokat a CSS javítása érdekében.

Egyéb

Néhány további szempontot is megvizsgáltam, amelyeket figyelembe kell venni Safari mobil webes fejlesztésénél.

1. Bizonyos attribútumok használata esetén szállítófüggő prefixumokat kell használni.

* A szállítófüggő prefixumok előtagok, amelyek lehetővé teszik a böngészők számára, hogy megértsék és megjelenítsék a CSS attribútumokat. Ez biztosítja, hogy a különböző böngészőkben eltérően implementált CSS-kódok a kívánt módon működjenek. Ezáltal biztosítható a következetesség különböző böngészők között, és a régebbi böngészőkkel való kompatibilitás.

Típusok

-webkit-: Chrome, Safari stb.
-moz-: Mozilla Firefox
-ms-: Internet Explorer és Edge
-o-: Opera

A szállítófüggő prefixumokra jellemző attribútumok a következők:

Ezenkívül a Safari körülbelül 5 MB-ra korlátozza a LocalStorage és a SessionStorage tárolókapacitását, és a tárolóterületet nem osztja meg a fülek között, ezért erre figyelni kell.