Wie sperre ich die Ausrichtung im Hochformat in einer iPhone-Webanwendung?

Ich erstelle eine iPhone-Webanwendung und möchte die Ausrichtung auf den Hochformatmodus beschränken. Ist das möglich? Gibt es dafür Web-Kit-Erweiterungen?

Bitte beachten Sie, dass dies eine in HTML und JavaScript für Mobile Safari geschriebene Anwendung ist. Es handelt sich NICHT um eine in Objective-C geschriebene native Anwendung.

Sie können CSS-Stile basierend auf der Ausrichtung des Ansichtsfensters angeben: Richten Sie den Browser mit body [orient = "Querformat"] oder body [orient = "Hochformat"] aus.

http://www.evotech.net/blog/2007/07/web-development-for-the-iphone/

Jedoch...

Apples Ansatz für dieses Problem besteht darin, dem Entwickler zu ermöglichen, das CSS basierend auf der Änderung der Ausrichtung zu ändern, die Neuausrichtung jedoch nicht vollständig zu verhindern. Ich habe anderswo eine ähnliche Frage gefunden:

http://ask.metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari

Dies ist eine ziemlich hackige Lösung, aber es ist zumindest etwas (?). Die Idee ist, eine CSS-Transformation zu verwenden, um den Inhalt Ihrer Seite in den Quasi-Hochformat-Modus zu versetzen. Hier ist JavaScript-Code (ausgedrückt in jQuery), um Ihnen den Einstieg zu erleichtern:

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body > div").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});

Der Code erwartet, dass der gesamte Inhalt Ihrer Seite in einem div direkt innerhalb des body-Elements gespeichert wird. Es dreht diesen Teil im Querformat um 90 Grad - zurück zum Hochformat.

Als Übung dem Leser überlassen: Das Div dreht sich um seinen Mittelpunkt, sodass seine Position wahrscheinlich angepasst werden muss, es sei denn, es ist perfekt quadratisch.

Es gibt auch ein unattraktives visuelles Problem. Wenn Sie die Ausrichtung ändern, dreht sich Safari langsam, und das Div der obersten Ebene rastet auf 90 Grad anders ein. Für noch mehr Spaß hinzufügen

body > div { -webkit-transition: all 1s ease-in-out; }

zu Ihrem CSS. Wenn sich das Gerät dreht, dann Safari und der Inhalt Ihrer Seite. Verführerisch!

Diese Antwort ist noch nicht möglich, aber ich poste sie für "zukünftige Generationen". Hoffentlich können wir dies eines Tages über die CSS @ viewport-Regel tun:

@viewport {
    orientation: portrait;
}

Hier ist die Seite "Kann ich verwenden" (ab 2019 nur IE und Edge):
https://caniuse.com/#feat=mdn-css_at-rules_viewport_orientation

Spezifikation (in Bearbeitung):
https://drafts.csswg.org/css-device-adapt/#orientation-desc

MDN:
https://developer.mozilla.org/en-US/docs/Web/CSS/@viewport/orientation

Basierend auf der MDN-Browserkompatibilitätstabelle und dem folgenden Artikel scheint es in bestimmten Versionen von IE und Opera Unterstützung zu geben:
http://menacingcloud.com/?c=cssViewportOrMetaTag

Diese JS-API-Spezifikation sieht auch relevant aus:
https://w3c.github.io/screen-orientation/

Ich hatte angenommen, dass dies möglich @viewportwäre , da dies mit der vorgeschlagenen Regel möglich wäre, indem orientationin den Ansichtsfenstereinstellungen in ameta Tag , aber ich hatte bisher keinen Erfolg damit.

Fühlen Sie sich frei, diese Antwort zu aktualisieren, wenn sich die Dinge verbessern.

Der folgende Code wurde in unserem HTML5-Spiel verwendet.

$(document).ready(function () {
     $(window)    
          .bind('orientationchange', function(){
               if (window.orientation % 180 == 0){
                   $(document.body).css("-webkit-transform-origin", "")
                       .css("-webkit-transform", "");               
               } 
               else {                   
                   if ( window.orientation > 0) { //clockwise
                     $(document.body).css("-webkit-transform-origin", "200px 190px")
                       .css("-webkit-transform",  "rotate(-90deg)");  
                   }
                   else {
                     $(document.body).css("-webkit-transform-origin", "280px 190px")
                       .css("-webkit-transform",  "rotate(90deg)"); 
                   }
               }
           })
          .trigger('orientationchange'); 
});

Ich habe mir diese CSS-Methode ausgedacht, um den Bildschirm mithilfe von Medienabfragen zu drehen. Die Abfragen basieren auf Bildschirmgrößen , die ich hier gefunden habe . 480px schien gut zu sein, da keine / wenige Geräte mehr als 480px Breite oder weniger als 480px Höhe hatten.

@media (max-height: 480px) and (min-width: 480px) and (max-width: 600px) { 
    html{
        -webkit-transform: rotate(-90deg);
           -moz-transform: rotate(-90deg);
            -ms-transform: rotate(-90deg);
             -o-transform: rotate(-90deg);
                transform: rotate(-90deg);
        -webkit-transform-origin: left top;
           -moz-transform-origin: left top;
            -ms-transform-origin: left top;
             -o-transform-origin: left top;
                transform-origin: left top;
        width: 320px; /*this is the iPhone screen width.*/
        position: absolute;
        top: 100%;
            left: 0
    }
}

Screen.lockOrientation() löst dieses Problem, obwohl die Unterstützung zu diesem Zeitpunkt (April 2017) weniger als universell ist:

https://www.w3.org/TR/screen-orientation/

https://developer.mozilla.org/en-US/docs/Web/API/Screen.lockOrientation

Ich mag die Idee, dem Benutzer zu sagen, dass er sein Telefon wieder in den Hochformatmodus versetzen soll. Wie hier erwähnt: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... aber mit CSS anstelle von JavaScript.

Vielleicht wird es in einer neuen Zukunft eine Out-of-the-Box-Lösung geben ...

Stand Mai 2015:

Es gibt eine experimentelle Funktionalität, die das macht.

Es funktioniert jedoch nur unter Firefox 18+, IE11 + und Chrome 38+.

Es funktioniert jedoch noch nicht unter Opera oder Safari.

https://developer.mozilla.org/en-US/docs/Web/API/Screen/lockOrientation#Browser_compatibility

Hier ist der aktuelle Code für die kompatiblen Browser:

var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;

lockOrientation("landscape-primary");

Obwohl Sie nicht verhindern können, dass eine Änderung der Ausrichtung wirksam wird, können Sie keine Änderung emulieren, wie in anderen Antworten angegeben.

Erkennen Sie zuerst die Geräteorientierung oder Neuorientierung und fügen Sie mithilfe von JavaScript Ihrem Wrapping-Element einen Klassennamen hinzu (in diesem Beispiel verwende ich das Body-Tag).

function deviceOrientation() {
  var body = document.body;
  switch(window.orientation) {
    case 90:
      body.classList = '';
      body.classList.add('rotation90');
      break;
    case -90:
      body.classList = '';
      body.classList.add('rotation-90');
      break;
    default:
      body.classList = '';
      body.classList.add('portrait');
      break;
  }
}
window.addEventListener('orientationchange', deviceOrientation);
deviceOrientation();

Wenn sich das Gerät im Querformat befindet, verwenden Sie CSS, um die Körperbreite auf die Ansichtsfensterhöhe und die Körperhöhe auf die Ansichtsfensterbreite festzulegen. Und lassen Sie uns den Transformationsursprung festlegen, während wir gerade dabei sind.

@media screen and (orientation: landscape) {
  body {
    width: 100vh;
    height: 100vw;
    transform-origin: 0 0;
  }
}

Richten Sie nun das Körperelement neu aus und schieben Sie es in Position.

body.rotation-90 {
  transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
  transform: rotate(-90deg) translateX(-100%);
}

// CSS hack to prevent layout breaking in landscape
// e.g. screens larger than 320px  
html {
  width: 320px;
  overflow-x: hidden;
}

Diese oder eine ähnliche CSS-Lösung bewahrt zumindest Ihr Layout, wenn Sie danach suchen.

Die Root-Lösung berücksichtigt die Funktionen des Geräts, anstatt zu versuchen, sie einzuschränken. Wenn das Gerät Ihnen die entsprechende Einschränkung nicht erlaubt, ist ein einfacher Hack die beste Wahl, da das Design im Wesentlichen unvollständig ist. Je einfacher desto besser.

Im Kaffee, wenn jemand es braucht.

    $(window).bind 'orientationchange', ->
        if window.orientation % 180 == 0
            $(document.body).css
                "-webkit-transform-origin" : ''
                "-webkit-transform" : ''
        else
            if window.orientation > 0
                $(document.body).css
                    "-webkit-transform-origin" : "200px 190px"
                    "-webkit-transform" : "rotate(-90deg)"
            else
                $(document.body).css
                    "-webkit-transform-origin" : "280px 190px"
                    "-webkit-transform" : "rotate(90deg)"

Inspiriert von der Antwort von @ Grumdrig und da einige der verwendeten Anweisungen nicht funktionieren würden, schlage ich das folgende Skript vor, wenn es von jemand anderem benötigt wird:

    $(document).ready(function () {

      function reorient(e) {
        var orientation = window.screen.orientation.type;
        $("body > div").css("-webkit-transform", (orientation == 'landscape-primary' || orientation == 'landscape-secondary') ? "rotate(-90deg)" : "");
      }
    $(window).on("orientationchange",function(){
        reorient();
    });
      window.setTimeout(reorient, 0);
    });

Ich habe ein ähnliches Problem, aber um Landschaft zu machen ... Ich glaube, der folgende Code sollte den Trick machen:

//This code consider you are using the fullscreen portrait mode
function processOrientation(forceOrientation) {
  var orientation = window.orientation;
  if (forceOrientation != undefined)
    orientation = forceOrientation;
  var domElement = document.getElementById('fullscreen-element-div');
  switch(orientation) {
    case 90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(-90deg)";
      break;
    case -90:
      var width = window.innerHeight;
      var height = window.innerWidth;
      domElement.style.width = "100vh";
      domElement.style.height = "100vw";
      domElement.style.transformOrigin="50% 50%";
      domElement.style.transform="translate("+(window.innerWidth/2-width/2)+"px, "+(window.innerHeight/2-height/2)+"px) rotate(90deg)";
      break;
    default:
      domElement.style.width = "100vw";
      domElement.style.height = "100vh";
      domElement.style.transformOrigin="";
      domElement.style.transform="";
      break;
  }
}
window.addEventListener('orientationchange', processOrientation);
processOrientation();

<html>
<head></head>
<body style="margin:0;padding:0;overflow: hidden;">
  <div id="fullscreen-element-div" style="background-color:#00ff00;width:100vw;height:100vh;margin:0;padding:0"> Test
  <br>
  <input type="button" value="force 90" onclick="processOrientation(90);" /><br>
  <input type="button" value="force -90" onclick="processOrientation(-90);" /><br>
  <input type="button" value="back to normal" onclick="processOrientation();" />
  </div>
</body>
</html>

Klicken Sie hier für ein Tutorial und ein Arbeitsbeispiel von meiner Website.

Sie müssen keine Hacks mehr verwenden, um die Bildschirmausrichtung von jQuery Mobile anzuzeigen, und Sie sollten PhoneGap nicht mehr verwenden, es sei denn, Sie verwenden tatsächlich PhoneGap.

Damit dies im Jahr 2015 funktioniert, benötigen wir:

• Cordova (jede Version, obwohl alles über 4.0 besser ist)
• PhoneGap (Sie können sogar PhoneGap verwenden, Plugins sind kompatibel)

Und eines dieser Plugins abhängig von Ihrer Cordova-Version:

• net.yoik.cordova.plugins.screenorientation (Cordova <4)

Cordova Plugin füge net.yoik.cordova.plugins.screenorientation hinzu

• Cordova-Plugin Cordova-Plugin-Bildschirmausrichtung hinzufügen (Cordova> = 4)

Cordova-Plugin Cordova-Plugin-Bildschirmausrichtung hinzufügen

Und um die Bildschirmausrichtung zu sperren, verwenden Sie einfach diese Funktion:

screen.lockOrientation('landscape');

Um es zu entsperren:

screen.unlockOrientation();

Mögliche Orientierungen:

• Porträt-Primär Die Ausrichtung erfolgt im primären Porträt-Modus.

• Porträt-Sekundär Die Ausrichtung erfolgt im sekundären Porträt-Modus.

• Querformat-Primär Die Ausrichtung erfolgt im primären Landschaftsmodus.

• Querformat-Sekundär Die Ausrichtung erfolgt im sekundären Landschaftsmodus.

• Porträt Die Ausrichtung ist entweder Porträt-Primär oder Porträt-Sekundär (Sensor).

• Landschaft Die Ausrichtung ist entweder Landschaft-Primär oder Landschaft-Sekundär (Sensor).