jQuery Mobile direction change event
jQuery Mobile direction change (orientationchange) Event
When the user vertically or horizontally rotating mobile device, trigger change of direction (orientationchange) event.
To use the change of direction (orientationchange) event, please attach it to the window object:
$(window).on("orientationchange",function(){
alert("方向有改变!");
});
Callback function takes one parameter, event objects, return the direction of the mobile device: "Portrait" (device remains in a vertical position) or "horizontal" (device remains in a horizontal position):
Examples
$(window).on("orientationchange",function(event){
alert("方向是: " + event.orientation);
});
alert("方向是: " + event.orientation);
});
try it"
Since the change of direction (orientationchange) bind events to the window object, we can use window.orientation property to set different styles to distinguish vertical and horizontal view:
Examples
$(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%"});
}
});
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"
 | window.orientation property returns 0 for portrait view, landscape view for a return to 90 or -90. |
|---|