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

159

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.

Kevin
quelle
1
Der ganze Grund für das Erstellen einer Webanwendung und nicht einer nativen App ist, dass sie plattformübergreifend sein kann. Warum sollten Sie eine iPhone-spezifische Webanwendung erstellen? Möchten Sie zusätzlichen Code schreiben, um andere Telefone auszusperren?
Siehe auch
xdhmoore
1
Ich interessiere mich für eine Lösung, die für "kleine Bildschirme" gedacht ist und nicht nur für Dinge, die 320px groß sind und von Apple hergestellt werden.
Sheriffderek

Antworten:

70

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

Scott Fox
quelle
Vielen Dank, aber ich mache diesen Teil bereits. Ich möchte wirklich verhindern, dass Mobile Safari nicht die Ausrichtung auf mich ändert, wenn der Benutzer das Telefon kippt.
Kevin
4
Apples Ansatz für dieses Problem, dem Entwickler zu ermöglichen, das CSS basierend auf der Orientierungsänderung zu ändern, aber eine Neuorientierung nicht vollständig zu verhindern. Ich habe eine ähnliche Frage an anderer Stelle gefunden: ask.metafilter.com/99784/…
Scott Fox
2
Ich habe gesehen, dass auf einigen Websites eine Nur-Querformat-Meldung angezeigt wird, die den Benutzer anweist, dass diese Website nur im Hochformat angezeigt werden kann - eine weitere Option, die Sie in Betracht ziehen sollten.
Jayden Lawson
97

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!

Grumdrig
quelle
3
Grumdrig, du bist mein Held! Dies ist der nützlichste und funktionierendste Tipp für die iPhone-Web-App, den ich je auf dieser Website gesehen habe. Vielen Dank!
30.
Bevor ich diese Antwort las, wollte ich in den "akzeptierten" Antwortkommentaren vorschlagen, dass jemand anderes dies versuchen und mir sagen sollte, ob es funktioniert. Ich bin wirklich froh, dass es schon jemand getan hat und dass es getan hat!
Lane
Was ist, wenn das Div rechteckig ist? Wie lautet die Formel, um den Transformationsursprung korrekt festzulegen? TA
Superjos
Sie können es auch über die Option "Unterstützte Schnittstellenorientierung" auf xCode unter Iphone / iPod-Entwicklungsinformationen steuern. Hat gut funktioniert
Rodrigo Dias
1
Können wir den Körper selbst nicht direkt drehen? Sagen Sie $ ("body"). CSS ("- webkit-transform" ,! Portrait? "Rotate (-90deg)": "");
Krsna Chaitanya
38

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.

xdhmoore
quelle
Bis 10/2019 funktioniert diese neue Funktion noch nicht. Bitte halten sie uns auf dem Laufenden. Vielen Dank.
RainCast
2
In der Tat hat es so lange gedauert, dass ich mich frage, ob es jemals so sein wird. Ich habe einen Link zur Seite "CanIUse" hinzugefügt.
xdhmoore
Danke. Sind Sie der Eigentümer dieser Funktion? Ich verstehe nicht ganz, wie eine neue CSS-Funktion veröffentlicht wird. Meiner Meinung nach spricht die CSS-Organisation mit jedem der wichtigsten Browser-Produktbesitzer und bittet sie, dies zu unterstützen. Wer kontrolliert den Prozess? Ich bin sehr neugierig.
RainCast
Ha nein nur ein anderer Entwickler. Sie suchen den W3C.
xdhmoore
19

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'); 
});
Andrei Schneider
quelle
Wie finden Sie diese Zahlen für den Transformationsursprung heraus?
Superjos
3
Warnung!!! Nicht alle Geräte geben die gleichen Werte für die Ausrichtung an, daher kann man sich nicht auf matthewgifford.com/blog/2011/12/22/…
Rob
6

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
    }
}
Rechnung
quelle
+1 schöne Lösung. Ich habe eine Fußzeile, deren Position unten festgelegt ist. Irgendeine Idee, wie man es nach der Drehung anzeigt?
Cybrix
1
Wie wäre es mit der Verwendung (Ausrichtung: Querformat) in der Medienabfrage anstelle bestimmter Pixelwerte? Oder muss ein genauer Pixelwert definiert werden?
Justin Putney
Ich habe einen Pixelwert verwendet, weil Sie im HTML einen genauen Wert festlegen müssen, der der Bildschirmhöhe entsprechen muss (im Querformat - also Bildschirmbreite). Die Verwendung orientation: landscapewürde in meinem Beispiel @JustinPutney
Bill
1
Von MDN: "Hinweis: Dieser Wert entspricht nicht der tatsächlichen Geräteorientierung. Wenn Sie die Softtastatur auf den meisten Geräten im Hochformat öffnen, wird das Ansichtsfenster breiter als hoch, sodass der Browser Querformatstile anstelle von Hochformat verwendet. ""
Sheriffderek
2
Orientierung @ Medienregeln --- ja. Ich dachte, sie
wären der richtige
2

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");
Fabio Nolasco
quelle
Ich verwende es in meinem Javascript-Code auf meiner WordPress-Website als: screen.lockOrientation ("Querformat"); und es funktioniert nicht. Ich bekomme: jQuery (...). LockOrientation ist keine Funktion. Muss ich ein Plugin oder Framework implementieren?
Alex Stanese
1

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%);
}
Reggie Pinkham
quelle
0
// 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.

Dgoldston
quelle
0

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)"
Philip
quelle
0

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);
    });
Yazid Erman
quelle
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>

ARibeiro
quelle
-3

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).

Gajotres
quelle