È possibile impedire la modifica dell'orientamento dell'iPhone/iPad nel browser?

Question

Ho visto domande simili su questo problema, ma sono correlate alle app native. Costruisco app web per iPhone/iPad che funzionano nel browser (Safari).

Mi chiedevo se esiste un modo per impedire il cambiamento dell'orientamento nel browser, magari tramite alcuni meta tag. Conosco il meta tag viewport che consente di specificare le funzionalità di scala e zoom, quindi è possibile che ci sia qualcosa di simile per l'orientamento.

Dubito che sia possibile, ma ho pensato di farmi una domanda qui per vedere.

Answer 1

Non sembra essere possibile per prevenire il cambiamento di orientamento, ma è in grado di rilevare con il codice di cui sopra.

Se si desidera impedire la modifica dell'orientamento, sembra che sia necessario creare un'app nativa utilizzando WebKit che annulla l'evento.

Answer 2

Sì, in realtà è possibile.

Javascript:

/*window.orientation returns a value that indicates whether iPhone is in portrait mode, landscape mode*/ 
window.onorientationchange = function() { 
var orientation = window.orientation; 

switch(orientation) { 
    case 0: 
     //Portrait mode 
    case 90: 
     // Landscape left 
    case -90: 
     //Landscape right 
} 

E 'scritto da qualche parte in iPhone doc, ma non riesco a trovarlo :).

UPDATE
Here from iPhone docs

Answer 3

perché non è sufficiente inserire uno event.preventDefault() all'interno della funzione?

Answer 4

si potrebbe essere davvero difficile e ruotare il corpo del sito web per contrastare il cambiamento dell'orientamento, se non funziona nulla altro ...

Answer 5

non si può impedirlo, ma è possibile modificare l'orientamento del corpo, secondo l'orientamento dell'ipad.

Utilizzare la risposta di Medopal per rilevare l'orientamento e modificare l'orientamento del proprio corpo.

ad esempio:

document.getElementsByTagName("body")[0].style.webkitTransform = "rotate(-90deg)"; 

Answer 6

Questa porzione di codice manterrà l'orientamento a -90 gradi (bello per la modalità orizzontale, la copertura del iPad 2 sarà appeso sul retro). Metti questo sotto il tag del corpo finale in uno script, o avvolgi le ultime due linee in una chiamata già effettuata.

function orient() { 
    var keepOrientationAt = -90; 
    var rotate = "rotate(" + (keepOrientationAt - window.orientation) + "deg)"; 
    document.getElementsByTagName("body")[0].style.webkitTransform = rotate; 
} 

window.onorientationchange = orient;  
orient();