Un sito web può forzare il blocco della rotazione del dispositivo?

Question

Attualmente sto lavorando a un sito web che è relativamente uguale per tutti i dispositivi; desktop & mobile. Sto lavorando con% perché penso che sia l'opzione migliore.

Si basa sulla modalità verticale. Se si cambia il dispositivo in orizzontale, l'intero sito Web appare come un nano grasso.

Quindi mi chiedo: c'è la possibilità di bloccare un sito Web, mostrandolo in verticale tutto il tempo?

E con questo intendo: rotazione del dispositivo bloccata. Non che quando si passa al paesaggio, il sito Web ritorna al ritratto, mentre nel paesaggio. (Che ho già visto un certo codice su StackOverflow.)

Check my site at: http://prototyping.iscs.nl/mobiel.html 

per riferimento :)

Grazie in anticipo

Answer 1

In un aggiornamento per.. una vecchia domanda ('12), penso che questo possa aiutare un sacco di gente!

Non ho trovato un vero modo di bloccare la rotazione del dispositivo, ma ho trovato un'alternativa perfetta, che ho visto alcune persone fare troppo.

Opzione A. un semplice avviso

Utilizzando un semplice script jQuery, è possibile rilevare l'orientamento del dispositivo.

if(window.innerHeight > window.innerWidth){ 
    alert("Please use Landscape!"); 
} 

Bene, un semplice avviso è facile, ma la notifica può essere molto più bella!

Opzione B. Una notifica bella immagine

Basta aggiungere un elemento fixed alla tua pagina che viene visualizzata quando l'orientamento è cambiato.

HTML

<div class="turnDeviceNotification"></div> 

CSS

.turnDeviceNotification { 
    position:fixed; 
    top: 0; 
    left:0; 
    height:100%; 
    width:100%; 
    display: none; 
} 

È possibile aggiornare questo elemento con il testo, o semplicemente collegarlo ad un background-image by

.turnDeviceNotification { 
    background-image:url('../images/turnDevice.jpg'); 
    background-size:cover; 
} 

Semplicemente Inserisci un bello sfondo per la tua cartella di immagini, come quella qui sotto.

Notato che l'oggetto ha un display: none? Questo perché altrimenti sarebbe mostrato anche in modalità verticale.Ora, tutto ciò che devi fare è usare lo script qui sotto, quindi l'oggetto è mostrato solo in modalità orizzontale.

jQuery(window).bind('orientationchange', function(e) { 
switch (window.orientation) { 
    case 0: 
    $('.turnDeviceNotification').css('display', 'none'); 
    // The device is in portrait mode now 
    break; 

    case 180: 
    $('.turnDeviceNotification').css('display', 'none'); 
    // The device is in portrait mode now 
    break; 

    case 90: 
    // The device is in landscape now 
    $('.turnDeviceNotification').css('display', 'block'); 
    break; 

    case -90: 
    // The device is in landscape now 
    $('.turnDeviceNotification').css('display', 'block'); 
    break; 
} 
}); 

Questo mostrerà la notifica solo quando l'orientamento del dispositivo è cambiato in orizzontale.

Answer 2

non è possibile. La rotazione del blocco è un'impostazione del dispositivo: http://support.apple.com/kb/HT4085 Quando non è bloccato dal dispositivo, il browser ruota e poiché il contenuto è all'interno del browser, anche il contenuto ruoterà. Forse la finestra vi aiuterà a risolvere il problema: < meta name = "viewport" content = "width = device-width" />" Vedo che ti manca che il meta tag

Answer 3

Non credo sia possibile, ma ci sono un paio di modi per aggirare

js modo: window.DeviceOrientationEvent

css modo

@media (orientation: landscape) { body { background-color: black; } }