Come bloccare l'orientamento alla modalità verticale in un'applicazione Web per iPhone?
https://stackoverflow.com/questions/1207008
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianDomanda
Sto creando un'applicazione Web per iPhone e desidero bloccare l'orientamento in modalità verticale. È possibile? Ci sono estensioni del web kit per fare questo?
Nota che questa è un'applicazione scritta in HTML e JavaScript per Mobile Safari, NON è un'applicazione nativa scritta in Objective-C.
Soluzione
È possibile specificare gli stili CSS in base all'orientamento della finestra: Scegli come target il browser con body [orient = & Quot; landscape & Quot;] o body [orient = & Quot; portrait & Quot;]
http://www.evotech.net / blog / 2007/07 / web-sviluppo-per-il-iphone /
Tuttavia ...
L'approccio di Apple a questo problema è quello di consentire allo sviluppatore di modificare il CSS in base alla modifica dell'orientamento ma non di impedire completamente il riorientamento. Ho trovato una domanda simile altrove:
http: // ask. metafilter.com/99784/How-can-I-lock-iPhone-orientation-in-Mobile-Safari
Altri suggerimenti
Questa è una soluzione piuttosto confusa, ma è almeno qualcosa (?). L'idea è di utilizzare una trasformazione CSS per ruotare i contenuti della pagina in modalità quasi verticale. Ecco il codice JavaScript (espresso in jQuery) per iniziare:
$(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);
});
Il codice prevede che l'intero contenuto della tua pagina viva all'interno di un div all'interno dell'elemento body. Ruota quel div di 90 gradi in modalità orizzontale - torna al ritratto.
Lasciato come esercizio al lettore: il div ruota attorno al suo punto centrale, quindi probabilmente la sua posizione dovrà essere regolata a meno che non sia perfettamente quadrata.
Inoltre, c'è un problema visivo sgradevole. Quando cambi orientamento, Safari ruota lentamente, quindi il div di livello superiore scatta a 90 gradi diversi. Per divertirti ancora di più, aggiungi
body > div { -webkit-transition: all 1s ease-in-out; }
al tuo CSS. Quando il dispositivo ruota, quindi Safari, quindi il contenuto della tua pagina. Beguiling!
Questa risposta non è ancora possibile, ma la sto pubblicando per " future generazioni " ;. Spero che un giorno saremo in grado di farlo tramite la regola CSS @viewport:
@viewport {
orientation: portrait;
}
Specifiche (in elaborazione):
https://drafts.csswg.org/css-device-adapt/#orientation -desc
MDN:
https://developer.mozilla.org/en-US/ docs / Web / CSS / @ viewport / orientamento
In base alla tabella di compatibilità del browser MDN e al seguente articolo, sembra che ci sia del supporto in alcune versioni di IE e Opera:
http://menacingcloud.com/?c=cssViewportOrMetaTag
Anche questa specifica dell'API JS sembra rilevante:
https://w3c.github.io/screen-orientation/
Avevo ipotizzato che, poiché era possibile con la regola @viewport proposta, sarebbe stato possibile impostare orientation nelle impostazioni della finestra in un tag meta, ma finora non ho avuto successo con questo .
Sentiti libero di aggiornare questa risposta man mano che le cose migliorano.
Nel nostro gioco html5 è stato usato il seguente codice.
$(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');
});
Ho trovato questo metodo CSS unico per ruotare lo schermo usando le media query. Le query si basano sulle dimensioni dello schermo che ho trovato qui . 480px sembrava essere buono in quanto nessun / pochi dispositivi avevano una larghezza superiore a 480px o inferiore a 480px.
@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() risolve questo problema, sebbene al momento il supporto sia tutt'altro che universale (aprile 2017):
https://www.w3.org/TR/screen-orientation/
https://developer.mozilla.org/en -US / docs / Web / API / Screen.lockOrientation
Mi piace l'idea di dire all'utente di riportare il telefono in modalità verticale. Come è menzionato qui: http://tech.sarathdr.com/featured/prevent-landscape-orientation-of-iphone-web-apps/ ... ma utilizzando CSS anziché JavaScript.
Forse in un nuovo futuro avrà un sollievo immediato ...
A partire da maggio 2015,
esiste una funzionalità sperimentale che lo fa.
Ma funziona solo su Firefox 18+, IE11 + e Chrome 38+.
Tuttavia, non funziona ancora su Opera o Safari.
Ecco il codice corrente per i browser compatibili:
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;
}
Questa, o una soluzione CSS simile, almeno manterrà il layout se è quello che stai cercando.
La soluzione di root tiene conto delle capacità del dispositivo piuttosto che tentare di limitarle. Se il dispositivo non ti consente la limitazione appropriata di un semplice hack è la soluzione migliore poiché il design è sostanzialmente incompleto. Più semplice è, meglio è.
Nel caffè se qualcuno ne ha bisogno.
$(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)"
Sebbene non sia possibile impedire che il cambiamento di orientamento abbia effetto, non è possibile emulare alcun cambiamento come indicato in altre risposte.
Rileva innanzitutto l'orientamento o il riorientamento del dispositivo e, utilizzando JavaScript, aggiungi un nome di classe al tuo elemento di avvolgimento (in questo esempio uso il tag body).
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();
Quindi, se il dispositivo è orizzontale, utilizzare CSS per impostare la larghezza del corpo all'altezza della finestra e l'altezza del corpo alla larghezza della finestra. E lasciamo & # 8217; s impostare l'origine della trasformazione mentre & # 8217; siamo su di esso.
@media screen and (orientation: landscape) {
body {
width: 100vh;
height: 100vw;
transform-origin: 0 0;
}
}
Ora, riorienta l'elemento body e fai scorrere (traduci) in posizione.
body.rotation-90 {
transform: rotate(90deg) translateY(-100%);
}
body.rotation90 {
transform: rotate(-90deg) translateX(-100%);
}
Ispirato alla risposta di @ Grumdrig e poiché alcune delle istruzioni utilizzate non funzionavano, suggerisco il seguente script se necessario da qualcun altro:
$(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);
});
Fai clic qui per un'esercitazione e un lavoro esempio dal mio sito Web.
Non è più necessario utilizzare gli hack solo per guardare jQuery Mobile Screen Orientation né utilizzare PhoneGap, a meno che non si stia effettivamente utilizzando PhoneGap.
Per far funzionare tutto questo nel 2015 abbiamo bisogno di:
- Cordova (qualsiasi versione anche se qualcosa di sopra 4.0 è migliore)
- PhoneGap (puoi persino usare PhoneGap, i plugin sono compatibili)
E uno di questi plugin a seconda della versione di Cordova:
- net.yoik.cordova.plugins.screenorientation (Cordova < 4)
plug-in cordova aggiungere net.yoik.cordova.plugins.screenorientation
- cordova plugin aggiungi cordova-plugin-screen-orientamento (Cordova > = 4)
plugin cordova aggiungi cordova-plugin-screen-orientamento
E per bloccare l'orientamento dello schermo basta usare questa funzione:
screen.lockOrientation('landscape');
Per sbloccarlo:
screen.unlockOrientation();
Possibili orientamenti:
ritratto-primario L'orientamento è nella modalità ritratto principale.
ritratto secondario L'orientamento è nella modalità ritratto secondario.
paesaggio primario L'orientamento è in modalità paesaggio principale.
paesaggio secondario L'orientamento è in modalità paesaggio secondario.
ritratto L'orientamento è verticale-ritratto o ritratto-secondario (sensore).
paesaggio L'orientamento è orizzontale o secondario (sensore).
