it-swarm.com.de

Was ist die beste Methode, um eine Webseite bei Orientierungsänderungen erneut zu rendern?

Ich habe ein fließendes CSS-Layout, das auf einem iPhone schlecht dargestellt wird, wenn ich die Ausrichtung ändert. (Es sieht gut aus, wenn es aktualisiert wird).

Ich verwende den folgenden Code, um die Seite bei Orientierungsänderungen zu aktualisieren, was gut funktioniert - es fühlt sich ein bisschen falsch an. Gibt es eine Möglichkeit, dies zu erreichen, ohne die gesamte Seite neu laden zu müssen? Es ist eine mobile Website, ich möchte den Benutzer nicht zwingen, die Seite zweimal zu laden.

var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    window.location.reload()
}, false);   

Bearbeiten:

Die zwei Hauptprobleme beim Testen auf einem iPhone sind:

Ich habe eine Breite von 100% mit einem rechts ausgerichteten Hintergrundbild. Wenn ich die Ausrichtung von Hochformat auf Querformat ändere, bleibt die Körperbreite so, wie sie im Hochformat dargestellt wird, und umgekehrt. Es ist eher ein Problem von Querformat bis Hochformat, da die Seite zu breit ist und die Bilder doppelt zu rendern scheinen.

28
theorise

Vorausgesetzt, dass Ihr CSS bereits glücklich auf den Bildschirmen unterschiedlicher Größe für mobile Geräte gerendert wird, müssen Sie den Darstellungsbereich im <Kopf> Ihrer Vorlage definieren. 

Beispiel: Hiermit wird die Seitenbreite auf die Bildschirmbreite des Geräts und einen anfänglichen Zoom von 100% festgelegt. Der anfängliche Zoom wird beim Laden der Seite angewendet, jedoch nicht, wenn die Ausrichtung geändert wird.

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

Durch Hinzufügen eines Parameters mit maximaler Skalierung = 1,0 zum Ansichtsfenster zwingen Sie das iPad/iPhone, die Zoomstufe beizubehalten und die Seite bei einer Änderung der Ausrichtung neu zu gestalten. Der Nachteil ist, dass das Zoomen deaktiviert wird. Der Vorteil ist jedoch, dass Sie Layoutanpassungen mit Medienabfragen vornehmen können, um den Inhalt für die aktuelle Ausrichtung passend darzustellen. Weitere Informationen zum Ansichtsfenster finden Sie hier: Auswählen eines ViewPort

Nun zu den Medienanfragen. Sie sollten Medienabfragen am unteren Rand Ihrer CSS-Datei und in der Reihenfolge von kleinster Breite zu größter Breite für die Bildschirmbreite einfügen. Beispiel aus dem CSS-Beispiel Html5BoilerPlate :

@media only screen and (min-width: 480px) {
  /* Style adjustments for viewports 480px and over go here */

}

@media only screen and (min-width: 768px) {
  /* Style adjustments for viewports 768px and over go here */

}

Alle Ihre normalen Stile stehen also oben und werden zuerst angewendet. Wenn der Bildschirm 480px oder mehr ist, wird der nächste Stilblock angewendet. Wenn der Bildschirm 768px oder mehr ist, wird der letzte Stilblock angewendet.

Durch die Kombination des festen Zoomfaktors bis 1,0 und der Medienabfragen können Sie die Anpassung Ihrer Website an die Bildschirmgröße und -ausrichtung ohne Javascript ändern. Natürlich müssen Sie sicherstellen, dass die Website gut gestaltet ist, sodass Benutzer nicht zoomen müssen. Wenn Ihre Website für Mobilgeräte optimiert ist, sollte dies kein Problem sein.

Bitte beachten Sie: Andere mobile Browser, die nicht zur Safari gehören, können die Seite neu gestalten, ohne die maximale Skalierung im Ansichtsfenster festzulegen. Dieses Verhalten ist jedoch inkonsistent und die meisten Entwickler scheinen Apple-Geräte zu bedienen, selbst wenn die Implementierung schlechter ist als bei anderen Geräten. Bei einigen anderen Geräten wird die Zoomstufe beibehalten und das Ansichtsfenster neu zentriert, wenn sich die Ausrichtung ändert. Alle Geräte sind jedoch in Ordnung, um die Zoomstufe auf 1,0 festzulegen.

24
BenSwayne

Update 2015

Alle anderen Antworten sind falsch oder veraltet. Folgendes funktioniert:

  window.addEventListener('orientationchange', function () {
    var originalBodyStyle = getComputedStyle(document.body).getPropertyValue('display');
    document.body.style.display='none';
    setTimeout(function () {
      document.body.style.display = originalBodyStyle;
    }, 10);
  });

Der Code hört auf das orientationchange -Ereignis und erzwingt einen erneuten Fluss des body-Elements, indem er es verbirgt und 10 Millisekunden später anzeigt. Es hängt nicht von <meta>-Tags oder Medienabfragen ab.

Bei anderen Antworten wurde die Verwendung von Medienabfragen vorgeschlagen, die Sie jedoch bereits verwenden, da Sie sagten: "Es sieht gut aus, wenn es aktualisiert wird".

Einige andere Antworten schlagen die Verwendung von location.reload() vor. Dies ist sehr ineffizient, da dadurch die gesamte Seite einschließlich der Bilder usw. neu geladen wird. Insbesondere auf mobilen Geräten möchten Sie dies nicht.

Wieder andere Antworten schlugen vor, <meta name="viewport" content="width=device-width, initial-scale=1.0"> oder Variationen davon hinzuzufügen. Ab Safari 7 funktioniert das nicht mehr. Hier ist eine Demo . Um sicherzugehen, dass es nicht funktioniert, beginnen Sie mit dem iPad im Querformat, laden Sie die Seite und drehen Sie dann. Beachten Sie, dass sich die Seite nicht auf die volle Höhe ausdehnt, obwohl Sie die gesamte Flexbox verwenden.

Vergleichen Sie das mit dieser Seite , wo wir in der Produktion die Karosserie-Technik ein-/ausblenden verwenden.

11
Dan Dascalescu

Verwendet eine Methode, die eine Neulackierung und einen Reflow in einem einzelnen Javascript-Stack-Frame bewirkt. Sie sind nicht an bestimmten Viewport-Antworten interessiert, da häufig Zugriffe erforderlich sind, um das Zoomen durch Zusammendrücken usw. aufrechtzuerhalten.

$(window).on('orientationchange', function() {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
}); 

Oder nicht jquery gleichwertig 

window.addEventListener('orientationchange', function () {
    document.body.style.display='none';
    document.body.offsetHeight; //cause a reflow
    document.body.style.display='block'; //cause a repaint
});
3
James Westgate

Ich hatte ein ähnliches Problem und so habe ich es mit jQuery behoben.

In meinem Fall haben sich die Stile für mein <nav>-Element nicht korrekt geändert. Ich habe eine modifizierte Version des Codes von kidkaos77 in Kombination mit $.get() verwendet, um nur einen bestimmten Teil der Seite zu laden:

$(window).bind("resize",function() {
    //on resize reload only nav & replace
    $.get("index.php" +  ' nav', function(data) {
        $("nav").replaceWith($(data).find("nav"));
    });
});

Bei dieser Methode müssen Sie nicht die gesamte Seite neu laden, sondern Sie müssen genau angeben, welche Elemente von der Orientierungsänderung betroffen sind. In Ihrem Fall scheint es, als würden Sie nur ein div benötigen.

0
Tommy DC