Determine horizontal screen and vertical screen (3) and horizontal screen

Determine horizontal screen and vertical screen (3) and horizontal screen

When you create a mobile page, you often need to determine whether the screen is landscape or landscape. We will record the currently known judgment methods through HTML, CSS, and JS to facilitate future reading.

1. reference the landscape and landscape styles in html:

<Link rel = "stylesheet" media = "all and (orientation: portrait) "href =" portrait.css "rel =" external nofollow "> // reference the CSS of the portrait screen <link rel =" stylesheet "media =" all and (orientation: landscape) "href =" landscape.css "rel =" external nofollow "> // reference the CSS of the landscape

2. Use the media query method in CSS to judge:

@ Media (orientation: portrait) {// landscape CSS} @ media (orientation: landscape) {// landscape CSS}

3. js checks whether the screen is landscape or portrait:

Window. addEventListener ("onorientationchange" in window? Orientationchange ":" resize ", function () {if (window. orientation = 180 | window. orientation = 0) {alert ('portrait screen status! ');} If (window. orientation = 90 | window. orientation =-90) {alert ('landscape status! ') ;}}, False );

The onorientationchange event is triggered as long as the user changes the viewing mode of the device.

Orientation has four values: 0, 90,-90,180

When the values are 0 and 180, It is a portrait screen (180 is a reverse portrait screen );

Horizontal screen at the time of 90 and-90 (-90 is the reverse portrait mode );

The above is all the content of this article. I hope this article will help you in your study or work. I also hope to provide more support to the customer's home!