Use JavaScript to determine whether a mobile browser is a horizontal or vertical screen problem _javascript tips

To determine the status of a mobile phone screen:
function hengshuping () {
if (window.orientation==180| | window.orientation==0) {
alert ("Vertical screen state!") ")
}
if (window.orientation==90| | WINDOW.ORIENTATION==-90) {
alert ("Horizontal screen state!") ")
}
}
window.addeventlistener (" Onorientationchange "in Window?) Orientationchange ":" Resize ", hengshuping, false);

Mobile end of the browser generally support window.orientation This parameter, through this parameter can determine whether the phone is in the horizontal or vertical screen state.

Thus, the corresponding procedure is executed according to the actual demand. You can do this by adding a listener event onorientationchange.

In the ipad, iphone Web Development, we probably need to judge whether it's a horizontal screen or a vertical screen.

Here's how to use JQuery to determine how the ipad, IPhone, Android is a horizontal or vertical screen

Function Orient () {
if (window.orientation = = | | window.orientation = -90) {
//ipad, iphone vertical screen; andriod horizontal screen
$ ("Body"). attr ("Class", "Landscape");
Orientation = ' landscape ';
return false;
}
else if (window.orientation = = 0 | | window.orientation = = 180) {
//ipad, iphone horizontal screen; andriod vertical screen
$ ("body"). attr (" Class "," Portrait ");
Orientation = ' portrait ';
return false;
}
}
The
$ (function () {
orient ();
}) is
called when the page loads; When the user changes the screen orientation
, call $ (window). bind (' Orientationchange ', function (e) {
orient ();
});

Window.orientation Value for screen orientation:

Ipad:90 or-90 horizontal screen

ipad:0 or 180 vertical screen

andriod:0 or 180 horizontal screen

Andriod:90 or-90 vertical screen

The above is a small series to introduce the use of JavaScript to determine whether the mobile browser is horizontal or vertical screen problem, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!