it-swarm.com.de

Deaktivieren Sie den horizontalen Bildlauf im mobilen Web

Ich habe ein Problem, bei dem auf bestimmten Telefonen für meine Site horizontale Bildläufe angezeigt werden. Ich habe versucht, overflow-x: hidden zu setzen, aber es funktioniert nicht. Die Breite ist automatisch, sodass die Größe des Webs automatisch an die Bildschirmgröße angepasst wird. Alle anderen Handys sind in Ordnung, außer wenn sie in Blackberry, Nokia E52 und Windows Mobile angezeigt werden, wird der horizontale Bildlauf angezeigt.

Irgendein Rat? Vielen Dank!

48
Sylph

Verwenden Sie zum Festlegen der Breite für die Gerätebreite Folgendes:

<meta name="viewport" content="width=device-width, initial-scale = 1.0, maximum-scale=1.0, user-scalable=no" />
65
jrosell

Fügen Sie einfach dieses CSS hinzu:

html, body {
  overflow-x: hidden;
}
body {
  position: relative
}
29
pollux1er

Ich habe diese Antwort gefunden hier auf stackoverflow das funktioniert perfekt für mich:

verwenden Sie dies mit Stil

body {
    overflow-x: hidden;
    width: 100%;
}

Verwenden Sie dies in head tag

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="Apple-mobile-web-app-capable" content="yes" />

Eine kleine Ergänzung von mir für den Fall, dass Ihr Körper eine Polsterung hat (um zu verhindern, dass sich das Gerät auf das Inhaltsfeld des Körpers skaliert, und somit immer noch eine horizontale Bildlaufleiste hinzufügt):

body {
    overflow: hidden;
    width: 100%;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}
23

Für mich ist das Viewport-Meta-Tag tatsächlich verursacht ein horizontales Scroll-Problem auf dem Blackberry.

Ich entfernte content="initial-scale=1.0; maximum-scale=1.0; aus dem Viewport-Tag und das Problem wurde behoben. Unten ist mein aktuelles Ansichtsfenster-Tag:

<meta name="viewport" content="user-scalable=0;"/>
6
James Lawruk

Ich weiß, dass dies eine alte Frage ist, aber es ist erwähnenswert, dass BlackBerry overflow-x Oder overflow-y Nicht unterstützt.

Siehe meinen Beitrag hier

2
samael

Ich benutze dies, um dem Benutzer das Vergrößern und Verkleinern zu ermöglichen:

<meta name="viewport" content="width=device-width;" />
2
michaelsp

Dies funktioniert für mich auf allen Mobilgeräten sowohl im Hoch- als auch im Querformat.

<meta name="viewport" content="width=device-width, initial-scale = 0.86, maximum-scale=3.0, minimum-scale=0.86">

1
Ron Royston