Zaprezentowano rozwiązania problemów z obsługą wielu przeglądarek w przeglądarce Safari, które pojawiły się podczas tworzenia aplikacji mobilnych, w szczególności problemy z obliczniem wysokości viewportu i przesunięciem interfejsu użytkownika spowodowanym przez wirtualną klawiaturę.
Problem z wysokością viewportu można rozwiązać używając dvh lub svh, problem z wirtualną klawiaturą można rozwiązać używając min-height, prefiksów dostawców i dynamicznej kontroli za pomocą JavaScript.
Podczas tworzenia aplikacji mobilnych dla Safari należy wziąć pod uwagę użycie prefiksów dostawców, ograniczenia wielkości LocalStorage i SessionStorage (około 5MB) oraz brak możliwości współdzielenia danych Storage między kartami.
Starałem się napisać artykuł, kliknąłem "zapisz", a pojawił się błąd 404 i wszystko zniknęło ㅠㅠ
Chcę dokumentować dwa bolesne problemy z obsługą wielu przeglądarek, z którymi spotkałem się podczas tworzenia aplikacji mobilnych, a także inne kwestie, które należy wziąć pod uwagę.
Chcę to udokumentować.
Problem z obliczniem wysokości viewportu spowodowany przez pasek adresu i pasek nawigacji przeglądarki
Safari i Samsung Internet mają wbudowany dolny pasek nawigacji. Jeśli nie ustawiono specjalnie opcji show/hide, pasek pojawia się podczas przewijania w dół i znika podczas przewijania w górę.
Problem polega na tym, że z powodu tych pasków viewport nie jest stały i się zmienia.
Na przykład, jeśli ustawimy wysokość na 100vh, układ będzie poprawnie renderowany, gdy pasek nawigacji jest niewidoczny, ale gdy pasek nawigacji się pojawi, zakryje on elementy interfejsu użytkownika.
Aby rozwiązać ten problem,
1. Użyj dvh.
dvh to dynamiczny viewport, który automatycznie odzwierciedla zmiany wysokości viewportu. Dzięki temu można dostosować układ interfejsu użytkownika do obecności lub braku paska adresu lub dolnego paska nawigacji.
2. Można również rozważyć svh.
svh to wysokość obszaru interfejsu użytkownika bez paska adresu ani paska nawigacji. W sytuacjach, w których spodziewamy się pojawienia się paska adresu lub paska nawigacji, użycie svh jest bardziej precyzyjne.
Problem z przesuwaniem interfejsu użytkownika przez klawiaturę wirtualną po wybraniu pola input
W Safari Mobile pojawił się problem z przesuwaniem istniejących elementów interfejsu użytkownika przez klawiaturę wirtualną po wybraniu pola input. W innych przeglądarkach klawiatura wirtualna zazwyczaj pojawia się jako element absolutny, ale w Safari Mobile wygląda to tak, jakby zastosowano display: block, zajmując miejsce.
W Safari, problem ten występuje, gdy wysokość viewportu jest dynamicznie dostosowywana po pojawieniu się klawiatury wirtualnej, co powoduje ponowne dostosowanie elementów używających jednostek vh. Aby to rozwiązać,
1. Użyj min-height.
Ustawienie stałej wysokości zapobiega przesuwaniu się interfejsu użytkownika.
html, body{height:100%;min-height:100vh;/* Ustawienie minimalnej wysokości */overflow: hidden;}
2. Zastosuj prefiksy dostawców. (opisane poniżej)
html, body{height: -webkit-fill-available;/* Kompatybilność z Safari */}
Dodaj atrybuty specyficzne dla danej przeglądarki.
3. Dynamicznie kontroluj viewport za pomocą JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Kod do wykonania, gdy klawiatura jest w górzedocument.body.classList.add('keyboard-visible');}else{// Kod do wykonania, gdy klawiatura jest w doledocument.body.classList.remove('keyboard-visible');}});
Dodaj listener do zdarzenia resize, aby wykryć zmiany viewportu i zastosować odpowiedni styl.
3-1. Kontroluj położenie po wystąpieniu zdarzenia focusin.
3-2. Kontroluj położenie po pojawieniu się klawiatury wirtualnej. (W poniższym przykładzie zastosowano klasę)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Klawiatura wirtualna jest w górzedocument.body.classList.add('keyboard-visible');}else{// Klawiatura wirtualna jest w doledocument.body.classList.remove('keyboard-visible');}});
W moim przypadku problem został rozwiązany za pomocą metody 3-1. Jeśli metoda 3-1 nie działa zgodnie z oczekiwaniami, najpierw sprawdź, czy kod poniżej działa zgodnie z oczekiwaniami.
Znaleziono kilka innych kwestii do rozważenia podczas tworzenia aplikacji mobilnych dla Safari.
1. W przypadku niektórych atrybutów należy używać prefiksów dostawców.
* Prefiksy dostawców to prefiksy, które umożliwiają przeglądarkom zrozumienie i renderowanie określonych atrybutów CSS, zapewniając, że CSS zaimplementowany na różne sposoby przez różne przeglądarki będzie działał zgodnie z przeznaczeniem. Pozwala to na zapewnienie spójności między przeglądarkami i kompatybilności ze starszymi przeglądarkami.
Rodzaje
-webkit-: Chrome, Safari itp. -moz-: Mozilla Firefox -ms-: Internet Explorer i Edge -o-: Opera
Typowe atrybuty wymagające prefiksów dostawców to:
Ponadto, Safari ogranicza pojemność LocalStorage i SessionStorage do około 5 MB i nie udostępnia przestrzeni magazynowej między kartami, dlatego należy zachować ostrożność.
ps. Jestem bardzo smutny, że mój napisany artykuł zniknął. Chociaż artykuł, który opublikowałem, nie jest wysokiej jakości... ㅠ Muszę koniecznie korzystać z funkcji zapisu tymczasowego.