Sto scrivendo un sito Web destinato all'iPhone. Mi piacerebbe impostare un corso sull'elemento <body> quando l'orientamento dell'iPhone cambia (ad esempio quando l'utente trasforma il telefono in modalità orizzontale e/o verticale).Come posso rilevare quando l'iPhone passa in modalità orizzontale tramite JavaScript? C'è un evento per questo?
Posso rilevare questa modifica tramite JavaScript? C'è un evento per questo?
Sì, tramite l'evento onorientationchange e la proprietà window.orientation.
Si potrebbe verificare la larghezza del corpo del documento. Se improvvisamente diventa più piccolo o più grande, sai cosa è successo. Puoi misurarlo con un intervallo.
window.setInterval(function() {
// check body with here and compare with global variable that holds the last measurement
// you may set a boolean isLandscape = true if the body with became bigger.
}, 50);
Non è del tutto sicuro che funzionerebbe: 'document.body.clientWidth' sembra restituire lo stesso valore in verticale e orizzontale (almeno nella pagina su cui sto lavorando). Ci potrebbero essere altre proprietà che potresti controllare. –
Dovresti usare qualcosa come getComputedStyle e chiedere la larghezza calcolata del tag body. Se ciò non funziona nel safari, prova currentStyle. Assicurati inoltre che il tag del corpo riceva una larghezza = 100%. – Thanks
Sì, potrebbe funzionare. È solo che la nozione di dimensioni di Mobile Safari sembra un po 'astratta, a causa del ridimensionamento che fa con lo schermo dell'iPhone. Sembra che non si ottenga effettivamente una maggiore larghezza di pixel (in termini di layout) quando è orizzontale, anche se sono disponibili più pixel fisici. Non ho ancora verificato cosa restituiscono le varie proprietà. –
Questa è anche una soluzione elegante. – Thanks
FYI Il requisito di accesso per la libreria di riferimento Safari di Apple è stato rimosso. –
@Pullets Forever - ah, eccellente, grazie. Aggiornato di conseguenza. –