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

123456

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

Write them in two CSS files separately

Portrait Screen

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

Landscape Screen

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

Ii. JS judgment on Landscape screen and landscape Screen

12345678910

// Determine the mobile phone portrait status: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('Horizontal screen 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 landscape.

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