So sperren Sie das Ansichtsfenster in Hochformatausrichtung in HTML5/CSS3

Question

Ist es möglich, die Ausrichtung des Ansichtsports auf einem mobilen Gerät im Hochformat zu sperren?

Ich googelte es aber konnte nicht genau herausfinden, wie es geht.

Answer 1

Wie meine Erfahrung, ist es nicht getan werden kann, wie Sie auf die Website zugreifen sind aus dem Browser. Was Lock-Orientierung Fähigkeit sein sollte, ist der Browser selbst - z. B. Safari, Chrome, Ihr HTML-CSS-Code wird nicht möglich sein, es zu kontrollieren.

Zum Beispiel, wenn Sie eine hybride mobile App erstellen - was bedeutet, eine Anwendung mit HTML CSS und js dann wandeln Sie es in mobile app mit Wrapper als Web-Ansicht im Inneren. Zu dieser Zeit können Sie die Bildschirmausrichtung sperren. Es gibt einige Konfigurationen, die in Objective C oder Java konvertiert werden, um damit umzugehen.

Answer 2

Mit CSS könnten wir verwenden; es ist möglich, dies auf dem iPhone funktioniert:

@viewport { 
    orientation: portrait; 
} 

Hier ist ein Link ist, dass wir die im Grunde macht das Gleiche könnte hinzufügen:

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> 

Dies ist nicht auf allen Browsern funktionieren kann, aber hoffentlich helfen. Dies verwendet JavaScript, um die Ausrichtung zu "sperren" & auch der zweite fügt einen EventListener dem Bildschirm hinzu, um die Ausrichtung zu identifizieren.

Dies ist, wie wir die Ausrichtung sperren würde:

screen.lockOrientation('portrait'); 

Dies ist, wie wir die Orientierung würde log:

screen.addEventListener("orientationchange", function() { 
    console.log("The orientation of the screen is: " + screen.orientation); 
});