jQuery Mobile Orientation Event
jQuery Mobile orientationchange Event
The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.
To use the orientationchange event, attach it to the window object:
$(window).on("orientationchange",function(){
alert("The
orientation has changed!");
});
The callback function can have one argument, the event object, which returns the orientation of the mobile device: "portrait" (the device is held in a vertical position) or "landscape" (the device is held in a horizontal position):
Example
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});
Try it yourself »Because the orientationchange event is bound to the window object, we can use the window.orientation property to, for example, set different styles to distinguish between portrait and landscape views:
Example
$(window).on("orientationchange",function(){
if(window.orientation
== 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
Try it yourself » |
The window.orientation property returns 0 for portrait and 90 or -90 for landscape view. |
|---|
