Verbesserung der mobilen Website-Erfahrung: Erzwingen der Ausrichtung im Querformat und Deaktivieren der automatischen Drehung

Beim Entwerfen für mobile Reaktionsfähigkeit können bestimmte Ausrichtungen erhebliche Auswirkungen auf den Benutzer haben Erfahrung. Mit dieser Frage wird nach einer Lösung gesucht, um eine mobile Website auf die Ausrichtung im Querformat zu beschränken und die automatische Drehung zu deaktivieren.

CSS-Lösung

Eine Möglichkeit, dies zu erreichen, sind CSS-Medienabfragen. Durch die Erstellung separater Stylesheets für die Ausrichtung im Quer- und Hochformat können Sie steuern, wie sich die Website je nach Ausrichtung des Geräts verhält. So implementieren Sie es:

1. Erstellen Sie zwei Stylesheets: style_l.css für Querformat und style_p.css für Hochformat.
2. Fügen Sie in style_l.css Ihre querformatspezifischen Stile ein, die angezeigt werden Der Inhalt der Website in voller Breite.
3. In style_p.css alle Elemente ausblenden und eine Meldung anzeigen, die Benutzer anweist, ihr Gerät für eine optimale Anzeige zu neigen.
4. Fügen Sie den folgenden Code zu Ihrem HTML-Kopfabschnitt hinzu um Medienabfragen zu verwenden:

jQuery Solution

jQuery kann auch verwendet werden, um die Geräteausrichtung zu erkennen und die Funktionalität der Site entsprechend zu ändern. Hier ist ein Beispiel:

$(window).on("orientationchange", function() {
  if (window.orientation == 0 || window.orientation == 180) {
    // Landscape orientation
    // Enable landscape-specific features here
  } else if (window.orientation == 90 || window.orientation == -90) {
    // Portrait orientation
    // Show a message to rotate device
  }
});

Beide Lösungen erzwingen effektiv die Ausrichtung nur im Querformat und deaktivieren die automatische Drehung auf der mobilen Website, wodurch das Benutzererlebnis verbessert wird, indem eine optimale Inhaltsanzeige in der beabsichtigten Ausrichtung sichergestellt wird.