A bejegyzés durumis AI által generált összefoglalója
A Safari böngészőben felmerülő mobil webfejlesztési cross-böngészési problémák megoldására javaslatokat ad a viewport magasságának kiszámításával és a virtuális billentyűzet okozta UI eltolódással kapcsolatosan.
A viewport magasság problémája dvh vagy svh használatával, a virtuális billentyűzet problémája min-height használatával, vendor prefixek alkalmazásával és JavaScripttel történő dinamikus vezérléssel oldható meg.
Safari mobil webfejlesztés esetén figyelembe kell venni a vendor prefixek használatát, a LocalStorage és SessionStorage tárolókapacitás-korlátot (kb. 5 MB) és a tárolók megosztásának lehetetlenségét a lapok között.
Szorgalmasan írtam a bejegyzést, majd a mentés után 404-es hiba jelent meg, és minden elveszett ㅠㅠ
Mobil webfejlesztés során tapasztalt két bosszantó cross-browsing probléma és egyéb figyelembe veendő kérdések dokumentációja.
Ezt szeretném most leírni.
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 nem állítjuk be külön a show/hide funkciót, görgetéskor megjelenik, majd eltűnik.
A probléma az, hogy emiatt a viewport nem fix, hanem változik.
Például, ha a magasságot 100vh-ra állítjuk, akkor navigációs sáv nélkül a layout pontosan megjelenik, de ha megjelenik a navigációs sáv, akkor az eltakarja a felületet.
Ennek a probléma megoldásához
1. dvh használata.
A dvh dinamikus viewport, amely automatikusan tükrözi a viewport magasságának változásait. Így képes reagálni a címsáv vagy az alsó navigáció megjelenésére/eltűnésére a UI layoutban.
2. svh is figyelembe vehető.
Az svh a címsáv és a navigáció kivételével a UI terület tiszta magassága. Amikor a címsáv vagy a navigáció megjelenésére számítunk, az svh használata pontosabb.
Probléma az input kiválasztásakor a virtuális billentyűzet miatt eltolódó UI-val
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 verziójában úgy tűnik, mintha a display block tulajdonságot alkalmazták volna, és helyet foglal.
A Safari a virtuális billentyűzet megjelenésekor dinamikusan igazítja a viewport magasságát, ami a vh egységet használó elemek újrarendeződéséhez és problémákhoz vezet. Ennek megoldására:
1. min-height használata.
A magasság rögzítése megakadályozza a UI eltolódását.
Néhány további dolgot is megvizsgáltam, amiket figyelembe kell venni a Safari mobil webes fejlesztése során.
1. Egyes tulajdonságok használata esetén szállítói prefixumokat kell használni.
* A szállítói 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 tulajdonságokat. A különböző böngészők eltérő módon implementálják a CSS-t, a prefixumok biztosítják, hogy a CSS a kívánt módon működjön. Ezáltal biztosítható a konzisztencia a különböző böngészők között, és a régebbi böngészőkkel is kompatibilis lehet.
Típusok
-webkit-: Chrome, Safari stb. -moz-: Mozilla Firefox -ms-: Internet Explorer és Edge -o-: Opera
A szállítói prefixumokat igénylő tipikus tulajdonságok a következők:
.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 és régebbi böngészők */display: grid;/* Újabb böngészők */}.sticky-element{position: -webkit-sticky;/* Safari */position: sticky;}input[type="text"],select{-webkit-appearance: none;-moz-appearance: none;appearance: none;}
Ezen kívül a Safari körülbelül 5 MB-ra korlátozza a LocalStorage és a SessionStorage kapacitását, és a tárolóterület nem oszlik meg a lapok között, ezért erre figyelni kell.
ps. Nagyon szomorú vagyok, hogy az eredetileg írt bejegyzésem elveszett. Bár a közzétett bejegyzés nem volt kiemelkedő minőségű,,,ㅠ Mindenképpen menteni kell a tervezeteket.