Ich habe eine Website erstellt, von der ich dachte, dass sie frei von CSS-Fehlern war, bis ich sie auf dem iPhone teste. Ich habe ein seltsames Problem, da sich die sich wiederholenden Hintergrundbilder nicht vollständig über die Seite erstrecken.
So sieht es auf einem iPhone und der vollständigen Website-URL aus: Beispiel Website
Antworten:
0 für die Antwort № 1Versuche dies: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Das Problem ist das gleiche, wenn Sie das reduzierenBreite Ihres Browsers. Das Problem ist, dass sich der Hintergrund dehnt, aber die Website ist nur so breit wie das gedehnte Hintergrundbild. Das Slide-Bit unter dem Logo hat jedoch eine feste Breite und erzeugt die Illusion, dass der Hintergrund nicht weit genug reicht.
Der obige Code sollte dieses Problem beheben, indem sichergestellt wird, dass die Website an die Breite des Browsers angepasst wird.
0 für die Antwort № 2
Deaktivieren Sie die automatische Skalierung, indem Sie ein Viewport-Meta-Tag auf den Kopfbereich Ihres HTML-Codes setzen. Hiermit wird die Breite Ihrer Seite an die Breite der Anzeige angepasst.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
0 für die Antwort № 3
Das Hinzufügen des Ansichtsfensters, um den Zoom auf 100% einzustellen, war leider nicht das, was ich suchte.
Nach dem weiteren Debuggen fand ich das Problemwurde durch das große Bannerbild oben verursacht. Dies war eine größere Breite als der Rest der Website. Indem Sie diese in ein zentriertes Hintergrundbild umwandelten und den Container mit einem ausgeblendeten Überlauf füllten, wurden alle Probleme behoben.