JS Detection mobile end of the screen code _javascript skills

Use media to determine the problem with screen width:

iOS is possible when I rotate the screen, but there is no response on the Android machine, and the horizontal screen is still the style of my vertical screen.

Check the data, CSS3 media if you want to have a better display on the mobile end, you need to add this code to the page header

<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" >

But I can't use this piece of code. Because my page is adapted. The size of the font and the style can be displayed based on the size of the screen. If I add this piece of code, my fitness will not work. So you have to use other methods

Solution:

The device on the mobile side provides an event: Orientationchange event

This event was added by Apple for Safari. So that developers can determine when the user switches the device from landscape view to portrait viewing mode.

This event is triggered when the device is rotated,

Listen for orientation changes
Window.addeventlistener ("Orientationchange", function () {
//announce the new Orientation Number
alert (window.orientation);
}, False);

The Orientationchange event is triggered whenever the user changes the viewing mode of the device. The event object at this time does not contain any valuable information,

Because the only relevant information can be accessed through the Window.orientation

Orientation Property

It has three values: 0,90,-90

0 is in vertical mode (portrait),-90 means that the device rotates horizontally to the horizontal screen mode (landscape) on the right, and 90 indicates that the device is horizontally rotated to the left of the horizontal screen mode (landscape).

Another is 180, which means the vertical screen but is flipped over the vertical screen mode. But this model has not yet been supported.

As shown in the figure:

Therefore, combining this Orientationchange event and window orientation properties, we are better at determining whether the device is in the horizontal or vertical screen.

(function () {
var init = function () {var
updateorientation = function () {var
orientation = window.orientation;
Switch (orientation) {case
:
case-90:
orientation = ' landscape '; this is a horizontal screen break
;
Default:
orientation = ' portrait ';//This is the vertical screen break
;
}
HTML is based on different rotation state, plus different class, horizontal screen plus landscape, vertical screen
//Plus portrait
document.body.parentNode.setAttribute (' Class ', orientation;
};
Every time you rotate, call this event.
window.addeventlistener (' Orientationchange ', updateorientation,false);
Initialization of the event
updateorientation ();
Window.addeventlistener (' domcontentloaded ', init,false);
} ();

So we can add class according to the different rotation state, so our CSS can be written like this

/** Vertical screen body Displays the red **/
. Portrait body div{
background:red
;
/** Horizontal screen body displays blue **/
. Landscape body div{
background:blue;

Another way to do this is to use media queries

@media all and (orientation:portrait) {The body
div {background:red}} 
}
@media all and (Orientation:landscape) {The body 
div {background:blue}} 
}

This orientation media query is also available on ios3.2+ and Android 2.0+ other browsers.

Relatively speaking, this kind of code is more concise. With the above js+css, this code is a pure CSS. When the device rotates, it calls the CSS to be changed according to the direction of the device rotation.

Compatibility

Some devices do not provide a Orientationchange event, but do not trigger a window's Resize event. and media queries does not support the case, what should we do?

You can use the Resize event to judge. With Innerwidth, Innerheight, you can retrieve the screen size. According to the width and height of the comparison judge, the width is less than high for the vertical screen, wide and high is horizontal screen.

The code is as follows:

(function () {
var updateorientation = function () {
var orientation = (Window.innerwidth > Window.innerheight) ? ' Landscape ': ' Portrait ';
Document.body.parentNode.setAttribute (' class ', orientation);
var init = function () {
updateorientation ();
Monitor Resize Event
window.addeventlistener (' resize ', updateorientation,false);
Window.addeventlistener (' domcontentloaded ', init,false);
} ();

In this way, we can see the change in the style of the screen rotation in the browser.

The combination of two detection methods, the code is as follows:

(function () {
var supportorientation = (typeof window.orientation = = ' number ' &&
typeof Window.onorientationchange = = = ' object ');
var init = function () {
var htmlnode = Document.body.parentNode,
orientation;
var updateorientation = function () {
if (supportorientation) {
orientation = window.orientation;
Switch (orientation) {case
:
case-90:
orientation = ' landscape ';
break;
Default:
orientation = ' portrait ';
break;
}
} else{
orientation = (Window.innerwidth > Window.innerheight)? ' Landscape ': ' Portrait ';
}
Htmlnode.setattribute (' class ', orientation);
if (supportorientation) {
window.addeventlistener (' Orientationchange ', updateorientation,false);
} else{
//Monitor Resize Event
window.addeventlistener (' resize ', updateorientation,false);
Updateorientation ();
};
Window.addeventlistener (' domcontentloaded ', init,false);
} ();

Using this method, you can solve the annoying mobile end of the device screen detection.