Um Cross-Browsing-Probleme in Safari bei der Entwicklung mobiler Webseiten zu lösen, wurden Lösungsansätze für Probleme mit der Berechnung der Viewport-Höhe und UI-Verschiebungen durch die virtuelle Tastatur vorgestellt.
Das Problem mit der Viewport-Höhe kann durch die Verwendung von dvh oder svh gelöst werden, Probleme mit der virtuellen Tastatur durch die Verwendung von min-height, die Anwendung von Vendor-Präfixen und die dynamische Steuerung mit JavaScript.
Bei der Entwicklung mobiler Webseiten für Safari sollten Vendor-Präfixe, die Beschränkung des LocalStorage und SessionStorage (ca. 5 MB) sowie die fehlende Speicherfreigabe zwischen Tabs berücksichtigt werden.
Ich habe fleißig geschrieben und auf Speichern geklickt, aber dann erschien eine 404-Fehlermeldung und alles war weg ㅠㅠ
Ich möchte zwei lästige Cross-Browsing-Probleme, die ich während der Entwicklung einer mobilen Webseite erlebt habe, und andere zu berücksichtigende Probleme dokumentieren.
Ich möchte diese aufzeichnen.
Problem der Viewport-Höhenberechnung durch die Adressleiste und die Navigationsleiste des Browsers selbst
Safari und Samsung Internet verfügen über eine integrierte untere Navigationsleiste. Sofern nicht speziell show/hide eingestellt ist, erscheint sie beim Herunterscrollen und verschwindet beim Hochscrollen.
Das Problem ist, dass sich der Viewport dadurch nicht fixiert und verändert.
Wenn beispielsweise eine Höhe von 100vh verwendet wird, wird das Layout zwar korrekt dargestellt, wenn keine Navigationsleiste vorhanden ist, aber wenn die Navigationsleiste angezeigt wird, verdeckt sie die Benutzeroberfläche.
Um dieses Problem zu lösen,
1. Verwenden Sie dvh.
dvh steht für dynamischen Viewport und passt sich automatisch an Änderungen der Viewport-Höhe an. Daher ist es möglich, auf Änderungen des UI-Layouts aufgrund des Vorhandenseins oder Fehlens der Adressleiste oder der unteren Navigationsleiste zu reagieren.
2. svh kann ebenfalls in Betracht gezogen werden.
svh ist die Höhe des reinen UI-Bereichs ohne Adressleiste oder Navigation. In Situationen, in denen eine Adressleiste oder Navigation erwartet wird, ist die Verwendung von svh genauer.
Problem des Verschiebens der Benutzeroberfläche durch die virtuelle Tastatur, wenn ein Eingabefeld ausgewählt wird
In Safari Mobile ist das Problem aufgetreten, dass die vorhandenen UI-Elemente durch die virtuelle Tastatur verschoben wurden, nachdem ein Eingabefeld ausgewählt wurde. In anderen Browsern wird die virtuelle Tastatur normalerweise absolut angezeigt, aber in Safari Mobile Web scheint sie Platz zu beanspruchen, als ob display: block angewendet würde.
Bei Safari wird die Höhe des Viewports dynamisch angepasst, wenn die virtuelle Tastatur erscheint, wodurch das Problem durch die Neuanpassung von Elementen mit vh-Einheiten entsteht. Um dies zu beheben,
1. Verwenden Sie min-height.
Fixieren Sie die Höhe, damit die Benutzeroberfläche nicht verschoben wird.
html, body{height:100%;min-height:100vh;/* Festgelegte minimale Höhe */overflow: hidden;}
2. Wenden Sie Vendor-Präfixe an. (wird später erläutert)
Fügen Sie Attribute hinzu, die in bestimmten Browsern wie Safari angewendet werden.
3. Steuern Sie den Viewport dynamisch mit JavaScript.
window.addEventListener('resize',()=>{if(window.innerHeight<500){// Code ausführen, wenn die Tastatur angezeigt wirddocument.body.classList.add('keyboard-visible');}else{// Code ausführen, wenn die Tastatur ausgeblendet wirddocument.body.classList.remove('keyboard-visible');}});
Registrieren Sie das resize-Ereignis, um Änderungen am Viewport zu erkennen, und wenden Sie den entsprechenden Stil an.
3-1. Steuern Sie die Position, wenn das focusin-Ereignis ausgelöst wird.
3-2. Steuern Sie die Position, wenn die virtuelle Tastatur angezeigt wird. (Im folgenden Beispiel wird eine Klasse angewendet)
let originalHeight =window.innerHeight;window.addEventListener('resize',()=>{if(window.innerHeight< originalHeight){// Virtuelle Tastatur angezeigtdocument.body.classList.add('keyboard-visible');}else{// Virtuelle Tastatur ausgeblendetdocument.body.classList.remove('keyboard-visible');}});
Ich habe Methode 3-1 verwendet, um das Problem zu lösen. Wenn Methode 3-1 nicht wie beabsichtigt funktioniert, überprüfen Sie zunächst mit dem folgenden Code, ob dies beabsichtigt ist.
Ich habe noch einige Punkte gefunden, die bei der Entwicklung mobiler Webseiten für Safari zu beachten sind.
1. Verwenden Sie Vendor-Präfixe, wenn Sie bestimmte Attribute verwenden.
* Vendor-Präfixe sind Präfixe, die es Browsern ermöglichen, bestimmte CSS-Attribute zu verstehen und zu rendern, und sie stellen sicher, dass CSS, das von Browsern unterschiedlich implementiert wird, wie beabsichtigt angewendet wird. Dadurch wird sowohl die Konsistenz zwischen Browsern als auch die Kompatibilität mit älteren Browsern gewährleistet.
Arten
-webkit-: Chrome, Safari usw. -moz-: Mozilla Firefox -ms-: Internet Explorer und Edge -o-: Opera
Typische Attribute, die Vendor-Präfixe benötigen, sind die folgenden.
Darüber hinaus beschränkt Safari die Kapazität von LocalStorage und SessionStorage auf etwa 5 MB und teilt den Speicherplatz nicht zwischen den Tabs, daher ist Vorsicht geboten.
ps. Ich bin sehr traurig, dass mein vorheriger Beitrag verloren gegangen ist. Mein Beitrag ist zwar keine hochwertige Arbeit, aber... ㅠ Ich muss unbedingt Zwischenspeichern verwenden.