jQuery funziona egregiamente su dispositivi mobile, tra cui anche iPhone e iPad. Spesso tuttavia c'è l'esigenza di sapere se il dispositivo in questione si trova in modalità landscape o portrait al fine di assegnare stili specifici agli elementi. Vediamo come fare con jQuery.
Il codice è il seguente:
function addOrientation() {
if (window.orientation == 0 || window.orientation == 180) {
$('body').addClass('portrait');
orientation = 'portrait';
return false;
}
else if (window.orientation == 90 || window.orientation == -90) {
$('body').addClass('landscape');
orientation = 'landscape';
return false;
}
}
$(function(){
addOrientation();
});
$(window).bind( 'orientationchange', function(e){
addOrientation();
});
La funzione utilizza la proprietà orientation dell'oggetto window per assegnare una classe specifica all'elemento body. Notate come si sia usato il metodo addClass() per preservare eventuali altre classi CSS assegnate all'elemento. Qualora invece body non avesse altre classi, potete usare il metodo attr().
La funzione viene eseguita sia al caricamento della pagina che all'atto del cambio di orientamento del dispositivo. Il secondo caso viene gestito tramite l'evento orientationchange.