In HTML5, you can determine whether the landscape screen is portrait or not.

In HTML5, you can determine whether the landscape screen is portrait or not.

We often encounter horizontal and vertical screen problems on mobile terminals. How should we judge or write different codes for horizontal and vertical screens.

There are two methods:

I. CSS determines whether a landscape screen is portrait

Written in the same CSS

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

Write them in two CSS files separately

Portrait Screen

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

Landscape Screen

<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">

Ii. JS judgment on Landscape screen and landscape Screen

// Determine the screen status of the phone: window. addEventListener ("onorientationchange" in window? "Orientationchange": "resize", function () {if (window. orientation = 180 | window. orientation = 0) {alert ('portrait status! ');} If (window. orientation = 90 | window. orientation =-90) {alert ('landscape status! ') ;}}, False); // mobile browsers generally support the window. orientation parameter. You can use this parameter to determine whether the mobile phone is in the landscape or portrait status.

Window. orientation value corresponding to the screen direction:
Ipad, iphone: 90 or-90 horizontal screen
Ipad, iphone: 0 or 180 portrait Screen
Andriod: 0 or 180 horizontal screen
Andriod: 90 or-90 portrait Screen