Warum funktioniert „overflow-x:hidden' nicht in mobilen Browsern und wie kann ich das Problem beheben?

Overflow-x:hidden schränkt Inhalte in mobilen Browsern nicht ein

Bei der Implementierung des Stilattributs overflow-x:hidden, um Inhalte auf die zu beschränken Wenn Sie die Breite des Ansichtsfensters ändern, kann es bei mobilen Browsern zu unerwartetem Überlaufverhalten kommen. Hier ist eine Aufschlüsselung des Problems und eine Lösung.

Problembeschreibung:

Trotz der Einstellung overflow-x:hidden im Body oder in den HTML-Tags zeigen mobile Browser mehr Inhalte an die angegebene Breite des Ansichtsfensters, was zu Leerzeichen auf der rechten Seite führt Seite.

Grund:

Es wurde beobachtet, dass mobile Browser overflow-x:hidden häufig vernachlässigen, wenn sie auf die HTML- und Body-Elemente angewendet werden. Stattdessen scheinen sie diese Attribute beim Parsen des Viewport-Meta-Tags zu ignorieren.

Lösung:

Um dieses Problem zu beheben, erstellen Sie ein Wrapper-Div innerhalb des Body-Tags und weisen Sie es zu den overflow-x:hidden-Stil für diesen Wrapper anstelle des Körpers oder html.

Betrachten Sie das folgende Codebeispiel:

    <div>
<pre class="brush:php;toolbar:false">#wrapper {
    overflow-x: hidden;
}

Zusätzlicher Hinweis:

In einigen Fällen müssen Sie dies möglicherweise auch tun Fügen Sie position: relativ zum Wrapper-Div hinzu, um das richtige Layout sicherzustellen.

Durch Anwenden von overflow-x:hidden auf den Wrapper Element isolieren Sie den Inhalt innerhalb dieses Div effektiv von den Einschränkungen mobiler Browser auf die HTML- und Body-Elemente. Dadurch können Sie den Inhalt auf die gewünschte Breite des Ansichtsfensters beschränken und unerwünschte Leerzeichen auf der rechten Seite beseitigen.