Mobile devices have two type of layout view, one is portrait and other one is landscape view. So for displaying our web page in both view, we need to programmatically make some changes. There are some ways to know when page view is changed. So let’s check out how we can detect orientation change on mobile devices.
orientationchange Event
The orientationchange event is triggered when the user rotates the mobile device vertically or horizontally.
Note: orientationchange event occures only on mobile, tablet and ipad device or a mobile emulator.
Syntax
1 | $(window).on("orientationchange",function(event){...}) |
function(event) : Required. function to run when the orientationchange event occurs.
1 2 3 4 5 6 7 8 9 10 11 12 13 | Example Alert window orientaion when the user rotates the mobile device: <script> $(window).on("orientationchange",function(){ alert(window.orientation); }); </script> |
the window.orientation property may provide the values:
0 – means portrait view
-90 – means a the device is landscape rotated to the right
90 – means the device is landscape rotated to the left
180 – means the device is portrait in opposite side
You may also interested in iPad/iPhone detection using JavaScript