Mobile Safari Viewport - Horizontales Scrollen verhindern?

Question

Ich versuche, ein Ansichtsfenster für den mobilen Safari zu konfigurieren. Mit dem Meta-Tag viewport versuche ich sicherzustellen, dass es kein Zoomen gibt und dass man die Ansicht nicht horizontal scrollen kann. Dies ist der Meta-Tag, den ich verwende:

<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Wenn ich die Seite auf meinem iPhone lade, scheint sie gut auszusehen:

Aber ich kann einen horizontalen Bildlauf durchführen, so dass es wie folgt aussieht (weiter nach rechts kann ich nicht gehen):

Wenn ich die Seite ins Querformat wechsle, wird sie wie erwartet gerendert, wobei die horizontale Bildlaufposition fixiert wird.

Ich versuche herauszufinden, wie ich diese Seite dazu bringen kann, nicht mehr horizontal zu scrollen. Ist es möglich, dass ich irgendein Seitenelement habe, das den Inhalt nach außen drückt? Ich würde nicht einmal erwarten, dass mit einem korrekten Viewport-Set möglich sein, aber ich greife hier nach Strohhalmen.

Answer 1

Ist es möglich, dass ich ein Seitenelement habe, das den Inhalt nach außen drückt?

Ja, das ist in der Tat der Fall. Die Ansichtsfenster-Einstellung definiert nur den sichtbaren Bereich des Ansichtsfensters, hat aber nichts mit dem Ausschalten des seitlichen Schwenks zu tun.

Um dies zu vermeiden, sollten Sie das Element, das Ihren Inhalt enthält, mit overflow:hidden versehen oder das Überlaufen von Elementen vermeiden.

NB: Andere mobile Browser unterstützen seit einiger Zeit auch den Viewport-Meta-Tag, so dass Sie auch in diesen Browsern testen sollten.

Answer 2

body { overflow-x: hidden; } funktioniert auch.

Answer 3

Ich bin spät dran, aber ich hatte gerade ein ähnliches Problem, bei dem ich einen horizontalen Bildlauf auf einem iPhone 5 hatte. Die Website wurde effektiv in doppelter Breite angezeigt, wobei die rechte Hälfte komplett leer war.

Tatsächlich musste ich nur das Meta-Tag viewport von ändern:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />

zu:

<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />

Durch Hinzufügen der "Initial-Scale"-Einstellung wurde das Bild wie erwartet nur vertikal gescrollt.

Answer 4

Dadurch wird verhindert, dass Elemente den Inhalt nach außen drängen:

body div {overflow: hidden ;}  @ media queries

Answer 5

Versuchen Sie diese Variante:

html, body{
  overflow-x: hidden;
}