wake-up-neo.com

100% breite CSS-Ausgabe nur bei mobiler Safari

Hier ist die fragliche Seite: www.prestigedesigns.com

Das Problem ist, dass meine Kopf- und Fußzeile nicht auf die zugewiesenen 100% gedehnt werden, sondern nur auf dem iPhone/iPad.

Ich habe versucht, was ich denke, ist alles und ich könnte wirklich etwas Hilfe gebrauchen? Gibt es noch jemanden, der ein ähnliches Problem hat?

Vielen Dank.

26
george

Es ist eine Art Ansichtsfenster-Problem bei Mobile Safari, aber Sie können den gleichen Effekt erzielen, indem Sie die Breite Ihres Desktop-Browser-Fensters verkleinern und nach rechts scrollen und sehen, dass der Hintergrund nicht mehr angezeigt wird.

Dies liegt daran, dass Sie beim Festlegen von width:100% Für Ihre Divs #top Und #header Anweisen, die Größe auf die Breite des enthaltenen Elements zu ändern, was in diesem Fall der Fall ist ist das Browserfenster (oder Ansichtsfenster). Sie sagen ihnen nicht, dass sie die Größe an den Inhalt anpassen sollen.

Die Standardbreite des Ansichtsfensters von Mobile Safari ist 980px. Daher wird 980px Als Breite des enthaltenen Elements für Ihre Divs verwendet. Aus diesem Grund wird der Hintergrund Ihres Layouts, das etwa 1050 Pixel groß ist, abgeschnitten.

Sie können dies für Mobile Safari beheben, indem Sie das Ansichtsfenster direkt festlegen (lesen Sie Apple's Docs ) oder indem Sie min-width: Breite Ihres Designs in Pixel hinzufügen. zu Ihrem body. Mobile Safari verwendet den Wert von min-width Zum Festlegen des Ansichtsfensters und verhindert, dass dies auch in Desktop-Browsern geschieht.

70
Walter Cameron

Stellen Sie das Ansichtsfenster so ein, dass Ihre Seite auf jedem Gerät angepasst wird.

<meta name="viewport" content="width=device-width, initial-scale=1.0" />
32
helpyou

Setzen Sie min-width:(Width of your design)px; in die CSS-Datei und dieses Problem wird behoben.

1
Shalmal Sheth

es ist nicht zugewiesen width: 100% der Header erhält width: 1009px; dasselbe mit der Fußzeile.

0
David Nguyen

Nur eine Ahnung, wie ich sie eigentlich nicht testen kann, aber das Fußelement, das Sie in der Fußleiste haben, ist auf eine absolute Breite in Pixeln eingestellt, während die Fußleiste auf% eingestellt ist - genau wie bei Ihrem Kopfelement - versuchen Sie, diese ebenfalls auf% zu ändern?

0
allanmayberry88