Meine Erfahrungen mit Cross-Browsing-Problemen (vor allem Safari)

Zwei knifflige Cross-Browsing-Probleme, die während der Entwicklung einer mobilen Webseite aufgetreten sind, und weitere zu berücksichtigende Probleme werden

hier dokumentiert.

Problem der Viewport-Höhenberechnung durch die Adressleiste und die Navigationsleiste des Browsers selbst

Safari und Samsung Internet verfügen über eine eigene untere Navigationsleiste. Sofern nicht speziell show/hide eingestellt ist, wird sie beim Herunterscrollen angezeigt und beim Hochscrollen ausgeblendet.

Das Problem ist, dass sich der Viewport dadurch nicht fixiert, sondern verändert.

Wenn beispielsweise eine Höhe von 100vh verwendet wird, wird das Layout ohne Navigationsleiste korrekt dargestellt, aber wenn die Navigationsleiste angezeigt wird, verdeckt sie die Benutzeroberfläche.

Um dieses Problem zu beheben,

1. dvh verwenden.

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 input ausgewählt (fokussiert) wird

Bei der Auswahl von input in Mobile Safari wurde das Problem festgestellt, dass die vorhandenen UI-Elemente aufgrund der virtuellen Tastatur verschoben wurden. Bei anderen Browsern wird die virtuelle Tastatur normalerweise absolut angezeigt, aber bei Mobile Safari in der mobilen Webseite scheint sie so zu sein, als wäre display block angewendet worden, und nimmt Platz ein.

Bei Safari wird die Höhe des Viewports dynamisch angepasst, wenn die virtuelle Tastatur angezeigt wird, wodurch die Elemente, die die Einheit vh verwenden, neu angepasst werden und das Problem auftritt. Um dies zu beheben,

1. min-height verwenden.

Die Höhe wird fixiert, um zu verhindern, dass die Benutzeroberfläche verschoben wird.

2. Vendor-Präfixe anwenden (wird später erläutert)

Attribute, die in bestimmten Browsern wie Safari angewendet werden, werden eingefügt.

3. Dynamische Steuerung des Viewports mit Javascript.

* Diese Methode wird nicht empfohlen. Das Layout blinkt, wenn sich die Scrollauflösung plötzlich bewegt.

Es wird ein resize-Ereignis verwendet, um zu erkennen, wann sich der Viewport ändert, und um den entsprechenden Stil anzuwenden.

3-1. Steuern Sie die Position, wenn das focusin-Ereignis auftritt.

3-2. Steuern Sie die Position, wenn die virtuelle Tastatur angezeigt wird (im folgenden Beispiel wird eine Klasse angewendet).

Es ist am besten, dies vollständig mit CSS zu lösen. Wenn dies mit den obigen Beispielen nicht funktioniert, überprüfen Sie, ob es sich um ein Element mit position: absolute oder fixed handelt, und entfernen Sie die Attribute top, right, left und bottom, während Sie den CSS-Code ändern.

Sonstiges

Zusätzlich wurden einige Punkte gefunden, die bei der Entwicklung mobiler Webseiten in Safari zu beachten sind.

1. Bei der Verwendung einiger Attribute werden Vendor-Präfixe verwendet.

* Vendor-Präfixe sind Präfixe, die es Browsern ermöglichen, bestimmte CSS-Attribute zu verstehen und zu rendern, und ermöglichen es, CSS, das von Browsern auf unterschiedliche Weise implementiert wird, wie beabsichtigt zu verwenden. Dies ermöglicht sowohl Konsistenz zwischen Browsern als auch Kompatibilität mit älteren Browsern.

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 es ist zu beachten, dass der Speicherplatz nicht zwischen den Tabs gemeinsam genutzt wird.