Impedisci il cambiamento dell’orientamento in iOS Safari

È ansible evitare la transizione alla visualizzazione orizzontale in Safari per iOS quando il dispositivo viene ruotato?

iOS Safari ha l’evento “orentationchange”, ho provato a intercettarlo e disabilitare il comportamento predefinito, come questo:

   function changeOrientation(event) { alert("Rotate"); event.preventDefault(); }    PAGE CONTENT   

ma quando provo la pagina sul mio iPhone, quando ruoto il dispositivo viene visualizzato l’avviso, ma la vista passa in orizzontale. Sembra che event.preventDefault () non arresti la rotazione.

C’è un modo per bloccare questo comportamento?

Non c’è modo di forzare un particolare orientamento in Mobile Safari; verrà sempre eseguito automaticamente quando l’utente ruota il dispositivo.

Forse puoi visualizzare qualcosa per gli orientamenti non supportati che informano l’utente che gli orientamenti non sono supportati e che hanno bisogno di ruotare il dispositivo per poter utilizzare la tua app web.

Jonathan Snook ha un problema con questo problema. Nelle sue diapositive, mostra come (ordinare) il blocco da ritratto (vedere le diapositive 54 e 55).

Il codice JS da quelle diapositive:

 window.addEventListener('orientationchange', function () { if (window.orientation == -90) { document.getElementById('orient').className = 'orientright'; } if (window.orientation == 90) { document.getElementById('orient').className = 'orientleft'; } if (window.orientation == 0) { document.getElementById('orient').className = ''; } }, true); 

e il CSS:

 .orientleft #shell { -webkit-transform: rotate(-90deg); -webkit-transform-origin:160px 160px; } .orientright #shell { -webkit-transform: rotate(90deg); -webkit-transform-origin:230px 230px; } 

Ho provato a farlo funzionare per il paesaggio su iPhone, ma non sembrava mai corretto al 100%. Mi sono avvicinato con il seguente codice jQueryian, comunque. Questo sarebbe all’interno della funzione già triggers. Nota anche: questo era all’interno di un contesto “salvato su homescreen”, e penso che abbia alterato la posizione dell’origine della tranform.

 $(window).bind('orientationchange', function(e, onready){ if(onready){ $(document.body).addClass('portrait-onready'); } if (Math.abs(window.orientation) != 90){ $(document.body).addClass('portrait'); } else { $(document.body).removeClass('portrait').removeClass('portrait-onready'); } }); $(window).trigger('orientationchange', true); // fire the orientation change event at the start, to make sure 

E il CSS:

 .portrait { -webkit-transform: rotate(90deg); -webkit-transform-origin: 200px 190px; } .portrait-onready { -webkit-transform: rotate(90deg); -webkit-transform-origin: 165px 150px; } 

Spero che aiuti qualcuno a avvicinarsi al risultato desiderato …

È stata proposta una specifica per implementare questa funzionalità.

Inoltre, consulta questo bug Chromium per ulteriori informazioni (non ancora chiaro se sarà implementato in WebKit o Chromium).

Sebbene non sia ansible impedire che il cambiamento dell’orientamento diventi effettivo, non è ansible emulare alcun cambiamento come indicato in altre risposte.

Per prima cosa rilevi l’orientazione o il riorientamento del dispositivo e, usando JavaScript, aggiungi un nome di class al tuo elemento wrapping (in questo esempio io uso il 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(); 

Quindi se il dispositivo è orizzontale, usa CSS per impostare la larghezza del corpo all’altezza del viewport e l’altezza del corpo alla larghezza della finestra. E impostiamo l’origine della trasformazione mentre ci siamo.

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

Ora, riorienta l’elemento del corpo e fai scorrere (traduci) in posizione.

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

Forse in un nuovo futuro …

Per quanto riguarda maggio 2015,

c’è una funzionalità sperimentale che lo fa. Funziona solo su Firefox 18+, IE11 + e Chrome 38+.

Tuttavia, non funziona ancora su Opera o Safari.

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

Ecco il codice corrente per i browser compatibili:

 var lockOrientation = screen.lockOrientation || screen.mozLockOrientation || screen.msLockOrientation; lockOrientation("landscape-primary"); 

Penso che nel nostro caso in cui è necessario fornire una visione coerente dei dati che vengono visualizzati sullo schermo per indagini mediche, la rotazione dello schermo del dispositivo non può essere consentita. Progettiamo l’applicazione per lavorare in verticale. Quindi la soluzione migliore per l’uso è bloccarla, cosa che non può essere fatta tramite il browser, o visualizzare un errore / messaggio che indica che l’applicazione non può essere utilizzata fino a quando l’orientamento non viene risolto.

La seguente soluzione sembra funzionare per me su iPhone4, 5, 6 e 6+ a partire da giugno 2016.

  

Se è ansible (cosa che non credo che sia), allora lo sconsiglio vivamente. Gli utenti odiano essere costretti a visualizzare le pagine in un modo particolare. Cosa succede se stanno usando il loro iphone in un dock e non possono sopportarlo in modalità orizzontale senza sganciarlo, o cosa succede se preferiscono la versione landscape della tastiera perché i tasti sono più grandi?

Se il tuo design richiede un orientamento particolare, potresti voler ripensare il tuo design.