Moje problemy z obsługą wielu przeglądarek (głównie Safari)

Opis dwóch uciążliwych problemów z obsługą wielu przeglądarek, z którymi spotkałem się podczas tworzenia aplikacji webowej na urządzenia mobilne, oraz innych kwestii, które należy wziąć pod uwagę.

Chcę je tutaj udokumentować.

Problem z obliczaniem wysokości viewportu spowodowany przez pasek adresu i pasek nawigacyjny przeglądarki

Safari i Samsung Internet posiadają własne, dolne paski nawigacyjne. Jeśli nie ustawiono specjalnie opcji show/hide, pojawiają się podczas przewijania w dół i znikają podczas przewijania w górę.

Problem polega na tym, że przez nie viewport nie jest stały, a zmienia się.

Na przykład, jeśli ustawimy wysokość na 100vh, gdy pasek nawigacyjny jest niewidoczny, layout jest renderowany poprawnie, ale gdy pasek nawigacyjny się pojawi, zasłania on elementy interfejsu użytkownika.

Aby rozwiązać ten problem,

1. Użyj dvh.

dvh to jednostka dynamicznego viewportu, automatycznie dostosowująca się do zmian wysokości viewportu. Dzięki temu możliwe jest reagowanie na zmiany layoutu interfejsu użytkownika spowodowane pojawieniem się lub zniknięciem paska adresu lub dolnego paska nawigacji.

2. Można również rozważyć svh.

svh to jednostka reprezentująca wysokość obszaru interfejsu użytkownika bez paska adresu i nawigacji. W sytuacjach, gdy oczekuje się pojawienia się paska adresu lub nawigacji, użycie svh jest bardziej precyzyjne.

Problem z przesuwaniem się interfejsu użytkownika przez wirtualną klawiaturę po wybraniu (focus) pola input

W mobilnej wersji Safari, po wybraniu pola input, wirtualna klawiatura powodowała przesunięcie istniejących elementów interfejsu użytkownika. W innych przeglądarkach wirtualna klawiatura zazwyczaj pojawia się w trybie absolute, ale w mobilnej wersji Safari wyglądało to, jakby zastosowano display: block, zajmując miejsce na ekranie.

W Safari, problem ten wynika z dynamicznej zmiany wysokości viewportu po pojawieniu się klawiatury, co prowadzi do ponownego dostosowania elementów używających jednostek vh. Aby to rozwiązać,

1. Użyj min-height.

Ustawienie stałej minimalnej wysokości zapobiega przesuwaniu się interfejsu użytkownika.

2. Zastosuj prefiksy dostawców. (opisane poniżej)

Dodanie atrybutów specyficznych dla danej przeglądarki.

3. Dynamiczne sterowanie viewportem za pomocą JavaScript.

* Ta metoda nie jest zalecana. Nagłe zmiany wysokości przewijania powodują migotanie layoutu.

Dodanie listenera do zdarzenia resize w celu wykrycia zmian viewportu i zastosowania odpowiednich stylów.

3-1. Sterowanie położeniem po wystąpieniu zdarzenia focusin.

3-2. Sterowanie położeniem po pojawieniu się wirtualnej klawiatury. (W poniższym przykładzie zastosowano dodawanie klasy)

Najlepszym rozwiązaniem jest rozwiązanie problemu wyłącznie za pomocą CSS. Jeśli powyższe metody zawiodą, należy sprawdzić, czy problematyczne elementy mają ustawione position: absolute lub fixed, a następnie usunąć atrybuty top, right, left, bottom, modyfikując CSS.

Inne kwestie

Oto kilka innych kwestii, które należy wziąć pod uwagę podczas tworzenia aplikacji webowej na urządzenia mobilne w Safari.

1. W niektórych przypadkach należy używać prefiksów dostawców.

* Prefiksy dostawców to prefiksy dodawane do atrybutów CSS, aby przeglądarka mogła je poprawnie zinterpretować i wyświetlić. Pozwala to na zapewnienie spójności między przeglądarkami i kompatybilności ze starszymi wersjami.

Rodzaje

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

Poniżej przedstawiono typowe atrybuty wymagające prefiksów dostawców.

Ponadto, Safari ogranicza pojemność LocalStorage i SessionStorage do około 5 MB i nie udostępnia przestrzeni magazynowej między kartami, co należy wziąć pod uwagę.