webentwicklung-frage-antwort-db.com.de

Responsive Website auf dem iPhone - unerwünschte Leerräume drehen sich von Landschaft zu Porträt

Ich erstelle eine responsive Website und habe gerade ein seltsames Verhalten auf meinen Inhaltsseiten festgestellt, wenn sie auf dem iPhone angezeigt wird. Es skaliert korrekt, wenn es im Hochformat geladen wird und auch im Querformat gedreht wird. Beim Zurückdrehen zum Hochformat scheint sich die Seite jedoch nach links zu verschieben oder nicht richtig zu zoomen. Auf der rechten Seite befindet sich ein Streifen weißer Fläche. Dieser Leerraum scheint auch beim ersten Laden im Hochformat vorhanden zu sein, da der Benutzer die Seite nach links streichen kann 

Anstatt die Erklärung weiter zu komplizieren, ist hier ein Link zu einer Beispielseite, auf der dieses Verhalten auftritt . Werfen Sie einen Blick auf ein iPhone und dann auf die Startseite, die dieses Problem nicht hat .

Wenn Sie etwas weiter sehen müssen, nur ich weiß :)

34
ellawson

Behoben! Das Problem kam von einem bestimmten Div. Um es zu finden, wurden die verschiedenen Elemente gelöscht, bis das Problem behoben wurde. 

Um es zu beheben, musste ich overflow-x: hidden zu diesem div hinzufügen und es sortiert es aus! Ich hoffe, das ist nützlich für andere mit einem ähnlichen Problem.

47
ellawson

Ich hatte das gleiche Problem, ich habe es mit der Einstellung behoben:

html, body { width:100%;  overflow:hidden; }
43

Dieses Problem tritt auf, wenn die Breite einer Division größer als die Bildschirmbreite des iPAD ist. 

In meinem Fall hatten einige Bereiche eine Größe von 1000px, also habe ich nur width:auto gewählt und es funktioniert. overflow-x:hidden macht auch dasselbe, ist aber kein bevorzugter Weg.

10
Navneet Kumar

Die Verwendung von "overflow-x: hidden" löst einen Teil des Problems, zerrt aber die Schriftrolle und wirkt mit seltsamen Verhaltensweisen (wie Jason sagte).

Manchmal ist es am schwierigsten, herauszufinden, was das Problem verursacht. In meinem Fall nach einigen Stunden, wenn festgestellt wurde, dass das Problem in Twitter's Bootstrap lag:

Wenn Sie Twitter Bootstrap mit "Kontrollgruppen" -Zonen für Ihre Formulare verwenden, könnte das Problem vorliegen. In meinem Fall habe ich das Problem gelöst mit:

.control-group .controls {
     overflow-x: hidden
 }

Nun war der weiße Raum rechts weg :)

4

Ich habe kein iPhone zum Testen, aber ich habe etwas Ähnliches mit Websites gefunden, die ich in der Vergangenheit erstellt habe. In meinem Fall liegt es daran, dass in Safari Mobile ein Fehler aufgetreten ist, der die Waage durcheinander gebracht hat, als er vom Hafen zum Land ging.

Der folgende Code hat es für mich behoben (kann mich nicht erinnern, woher ich es momentan habe)

if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
    var viewportmeta = document.querySelectorAll('meta[name="viewport"]')[0];
    if (viewportmeta) {
        viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0';
        document.body.addEventListener('gesturestart', function() {
            viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=1.6';
        }, false);
    }
}
4
user1010892

Ich verwende Bootstrap 3.3. Ich habe alle diese Lösungen ausprobiert und nichts hat funktioniert. Dann änderte ich meine <div class = "container" > in <div class = "container-fluid" > in dem Abschnitt, mit dem ich Probleme hatte. Dies hat das Problem gelöst.

0
Joe Rigney

Ich weiß, es ist eine Weile her, seit dieses Thema eröffnet wurde, aber ich bin auf eine ähnliche Situation gestoßen und habe festgestellt, dass ich ein Element mit den folgenden Eigenschaften hatte: right: -999999px; position: absolute;, das vom Bildschirm ausgeblendet wurde.

Das Ändern des obigen in left: -999999px; position: absolute; hat das gleiche Problem gelöst, das das OP hatte (weißer Bildschirm rechts und Fähigkeit, nach rechts zu streichen).

0
fidev

Ich habe alles versucht, was hier vorgeschlagen wurde, nichts geht. Dann habe ich festgestellt, dass es mit dem Seitenmaßstab verbunden ist. Also habe ich <meta name="viewport" content="width=device-width, initial-scale=1.0"> zu header.php im Ordner meines Hauptthemas hinzugefügt und es ist ein Problem behoben.

0
NikLanf

Behoben! .___. Hat ein ähnliches Problem. Festgelegt durch Festlegen der Breite auf die aktuelle Gerätebreite.

body, html {
  max-width: 100vw;
  margin: 0 auto;
  overflow-x: hidden;

}

0

Ich möchte die Lösung von Navneet Kumar hinzufügen, weil sie für mich funktioniert hat. Bei einem div-Tag, das mit width = 100% formatiert ist, darf auch keine linke oder rechte Auffüllung vorhanden sein. Die mobilen Browser (ich habe das Problem auf iPhone- und Android-Geräten festgestellt) interpretieren das Div als eine Breite von mehr als 100% und schaffen dadurch zusätzlichen Platz auf der rechten Seite. (Ich wusste dies von festen Breiten, aber nicht von prozentualen Breiten.) Verwenden Sie stattdessen width = auto in Verbindung mit dem Auffüllen. 

0
JohnH

Es scheint, als ob die Ergebnisse für verschiedene Umstände unterschiedlich sind, aber für die gesamte Region

hTML, Körper {Breite: 100%; x-overflow: versteckt; }

scheint für mich gearbeitet zu haben!

0
leebotton