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.
orientation
iphone
Kevin
quelle
quelle
Antworten:
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
quelle
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:
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
zu Ihrem CSS. Wenn sich das Gerät dreht, dann Safari und der Inhalt Ihrer Seite. Verführerisch!
quelle
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:
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
@viewport
wäre , da dies mit der vorgeschlagenen Regel möglich wäre, indemorientation
in 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.
quelle
Der folgende Code wurde in unserem HTML5-Spiel verwendet.
quelle
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.
quelle
orientation: landscape
würde in meinem Beispiel @JustinPutneyScreen.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
quelle
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.
quelle
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:
quelle
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).
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.
Richten Sie nun das Körperelement neu aus und schieben Sie es in Position.
quelle
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.
quelle
Im Kaffee, wenn jemand es braucht.
quelle
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:
quelle
Ich habe ein ähnliches Problem, aber um Landschaft zu machen ... Ich glaube, der folgende Code sollte den Trick machen:
quelle
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:
Und eines dieser Plugins abhängig von Ihrer Cordova-Version:
Cordova Plugin füge net.yoik.cordova.plugins.screenorientation hinzu
Cordova-Plugin Cordova-Plugin-Bildschirmausrichtung hinzufügen
Und um die Bildschirmausrichtung zu sperren, verwenden Sie einfach diese Funktion:
Um es zu entsperren:
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).
quelle