Wie sperre ich die Orientierung auf Hochformat-Modus in einer Anwendung iPhone Web?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianFrage
Ich baue eine iPhone Web Application und will die Orientierung auf Hochformat-Modus zu sperren. Ist das möglich? Gibt es Web-Kit-Erweiterungen, dies zu tun?
Bitte beachten Sie, dies ist eine Anwendung geschrieben in HTML und JavaScript für Mobile Safari, es ist nicht eine native Anwendung in Objective-C geschrieben.
Lösung
Sie können CSS-Stile festlegen, basierend auf Ansichtsfenster Orientierung: Ziel der Browser mit dem Körper [orient = "Landschaft"] oder Körper [orientieren = "Portrait"]
http://www.evotech.net / blog / 2007/07 / Web-Entwicklung-for-the-iphone /
Allerdings ...
Apples Ansatz für dieses Problem ist der Entwickler zu erlauben, die CSS zu ändern auf der Orientierungsänderung basieren aber nicht Umorientierung vollständig zu verhindern. Ich fand eine ähnliche Frage an anderer Stelle:
http: // fragen. metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
Andere Tipps
Dies ist eine ziemlich hacky Lösung, aber es ist zumindest etwas (?). Die Idee ist, ein CSS-Transformation zu verwenden, um den Inhalt Ihrer Seite quasi-Portrait-Modus zu drehen. Hier ist JavaScript (ausgedrückt in jQuery) Code für den Anfang:
$(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 nur im Innern des Körper Element leben. Es dreht sich, dass div 90 Grad im Querformat -. Zurück zum Portrait
als Übung dem Leser überlassen. Die div seinen Mittelpunkt dreht sich um, so dass seine Position wahrscheinlich angepasst werden müssen, wenn es perfekt quadratisch ist
Außerdem gibt es ein unattraktiv visuelles Problem. Wenn Sie Ausrichtung ändern, dreht sich Safari langsam, dann die Top-Level div schnappt zu verschiedenen 90Grad. Für noch mehr Spaß, fügt
body > div { -webkit-transition: all 1s ease-in-out; }
auf Ihre CSS. Wenn das Gerät dreht, dann Safari tut, dann tut der Inhalt Ihrer Seite. Täuschen!
Diese Antwort ist noch nicht möglich, aber ich es bin Entsendung für „zukünftige Generationen“. Wir hoffen, eines Tages werden wir dies über die CSS @viewport Regel in der Lage zu tun:
@viewport {
orientation: portrait;
}
Spec (in Bearbeitung):
https://drafts.csswg.org/css-device-adapt/#orientation -desc
MDN:
https://developer.mozilla.org/en-US/ docs / Web / CSS / @ Ansichtsfenster / Orientierung
Auf der Grundlage der MDN-Browser-Kompatibilität Tabelle und in dem folgenden Artikel, sieht aus wie es ist ein gewisse Unterstützung in bestimmten Versionen von IE und Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Dieses JS API Spec sieht auch relevant:
https://w3c.github.io/screen-orientation/
Ich habe angenommen, dass, weil es mit der vorgeschlagenen @viewport Regel möglich war, dass es durch das Setzen orientation in den Darstellungseinstellungen in einem meta Tag möglich sei, aber ich habe keinen Erfolg mit diesem bisher habe.
Sie können ferner diese Antwort zu aktualisieren, wie die Dinge zu verbessern.
Der folgende Code wurde in unserem html5-Spiel verwendet wird.
$(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 kam mit dieser CSS up einzige Methode zum Drehen der Bildschirmmedien Abfragen. Die Abfragen basieren auf Bildschirmgrößen , die ich hier gefunden . 480px schien gut zu sein, da keine / wenige Geräte mehr als 480px Breite hatten oder weniger als 480px Höhe.
@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 Unterstützung kleiner als universell zu der Zeit (April 2017):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / Web / API / Screen.lockOrientation
Ich mag die Idee, den Benutzer zu sagen sein Telefon-Modus zurück in den Portrait zu setzen. Wie es hier erwähnt wird: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... aber CSS anstelle von JavaScript verwendet wird.
Vielleicht in einer neuen Zukunft wird es hat eine out-of-the-box soludion ...
Wie für Mai 2015
Es ist eine experimentelle Funktion, die das tut.
Aber es funktioniert nur auf Firefox 18+, IE11 + und Chrome 38 +.
Doch es funktioniert nicht auf Opera oder Safari noch.
Hier ist der aktuelle Code für den kompatiblen Browser:
var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation;
lockOrientation("landscape-primary");
// 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, zumindest erhalten Sie Ihr Layout, wenn das ist, was Sie nach.
Die Wurzel Lösung für Gerätefunktionen Buchhaltung anstatt zu versuchen, sie zu begrenzen. Wenn das Gerät, die entsprechende Einschränkung nicht zulässt, als ein einfaches Hack Ihre beste Wette ist, da das Design im Wesentlichen nicht abgeschlossen. Je einfacher, desto besser.
Kaffee, wenn jemand sie 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)"
Während Sie nicht Ausrichtung Änderung wirksam daran hindern können Sie keine Änderung in anderen Antworten, wie angegeben emulieren können.
Die erste Vorrichtung Orientierung erkennen oder Umorientierung und, mit Hilfe von JavaScript, fügen Sie einen Klassennamen zu Ihrem Verpackungselement (in diesem Beispiel verwende ich den 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();
Dann, wenn das Gerät Landschaft ist, verwenden Sie CSS, um die Körperbreite auf die Darstellungshöhe eingestellt und die Körpergröße auf die Darstellungsbreite. Und lassen Sie uns stellen Sie die Transformation Herkunft, während wir gerade dabei sind.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Jetzt neu orientieren Sie das Körperelement und Schieber (übersetzen) in Position.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Inspiriert von @ Grumdrig Antwort, und weil einige der verwendeten Befehle nicht funktionieren würden, schlage ich das folgende Skript von jemandem benötigen, wenn sonst:
$(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);
});
Klicken Sie auf hier für ein Tutorial und Arbeits Beispiel aus meiner Website.
Sie müssen nicht mehr Hacks verwenden nur jQuery Mobile Bildschirmausrichtung zu suchen, noch sollten Sie PhoneGap mehr verwenden, es sei denn, Sie PhoneGap tatsächlich verwendet wird.
Um diese Arbeit im Jahr macht 2015 brauchen wir:
- Cordova (jede Version obwohl etwas über 4,0 ist besser)
- PhoneGap (man kann sogar PhoneGap verwenden, Plugins sind kompatibel)
Und eines dieses Plugins auf Ihrer Cordova-Version abhängig:
- net.yoik.cordova.plugins.screenorientation (Cordova <4)
cordova Plugin hinzufügen net.yoik.cordova.plugins.screenorientation
- cordova Plugin cordova-plugin-Bildschirm-Ausrichtung (Cordova> = 4)
cordova Plugin hinzufügen cordova-plugin-Bildschirm-Ausrichtung
Und Bildschirmausrichtung sperren nur für diese Funktion:
screen.lockOrientation('landscape');
entsperren:
screen.unlockOrientation();
Mögliche Orientierungen:
-
Portrait-Primär Die Orientierung in dem primären Hochformat.
-
Portrait-Sekundär Die Orientierung ist im sekundären Hochformat.
-
Landschaft primäre Die Orientierung ist in dem primären Querformat.
-
Landschaft sekundäre Die Orientierung ist im Sekundärquerformat.
-
Portrait Die Orientierung entweder Portrait-primäre oder Porträt-Sekundär (Sensor).
-
Landschaft Die Orientierung entweder Landschafts primären oder sekundären Landschafts (Sensor).
