How to use CSS and JS mobile side to determine the status of the phone screen

This article to share is about how to use CSS and JS Mobile to judge the status of the phone screen, the content is very good, the need for friends can refer to, hope can help everyone.

To disable the user auto-scaling feature:

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

There are two ways to judge the state of the screen: CSS judgment, JS judgment

(a), CSS judge the horizontal screen or vertical screen

1. Write in the same CSS file

@media screen and (orientation:portrait) {/  * portrait css*/} @media screen and (Orientation:landscape) {/  * landscape css*/}

Depending on the size of the screen, normal page size can be written in general, horizontal screen style is set separately. Just add a horizontal screen style based on the original style,

@media screen and (Orientation:landscape) {/  * horizontal css*/} Loads the horizontal screen style when the user traverses the screen, and the default style is loaded when the horizontal screen style is removed on the vertical screen.

2, separate write in two CSS, according to the screen to refer to different style files:

referencing different style files according to the screen

Horizontal screen:

<link rel= "stylesheet" media= "All and (Orientation:landscape)" href= "Landscape.css" >

Vertical screen:

<link rel= "stylesheet" media= "All and (orientation:portrait)" href= "Portrait.css" >

Note:CSS Judge screen is always seamless, that is, horizontal screen loading horizontal screen style, vertical screen loading vertical screen style,

(b) JS judge the horizontal screen or vertical screen

Judging the phone screen status:    window.addeventlistener ("Onorientationchange" in window? "Orientationchange": "Resize", function () {        if (window.orientation = = = | | window.orientation = = 0) {             console . log ("vertical screen");            $ (". codeig_s"). Removeclass (' Vercreen ');//Cancel horizontal screen style        }         if (window.orientation = = = | | window.orientation = =-90 ) {             Console.log ("horizontal screen");            $ (". codeig_s"). AddClass (' Vercreen ');//Add Horizontal screen style        }      }, False);

Note: The horizontal screen style in the Vercreen class name modifies the original default style, can be used normally, the disadvantage is that there must be a toggle state screen to trigger.

If the user by default is the horizontal screen state does not trigger the horizontal screen condition judgment, only the user from the horizontal screen to vertical screen or from the vertical screen to a horizontal screen will trigger the corresponding conditions to judge.

Without switching state will not perform any condition judgment, here is not as good as CSS to judge the overall screen.