How to determine horizontal and vertical screens in mobile HTML5

In the mobile terminal, we often encounter the problem of horizontal and vertical screens, so how should we judge or write different codes for horizontal and vertical screens. This article mainly introduces the relevant information on the method of judging horizontal and vertical screens in HTML5 (mobile terminal). Friends who need it can refer to it. I hope it can help everyone.

There are two methods here:

One: CSS determines horizontal and vertical screens

Written in the same CSS

1. @media screen and (orientation: portrait) {   
     /*竖屏 css*/   
   }    
   @media screen and (orientation: landscape) {   
     /*横屏 css*/   
   }

Written in 2 CSS separately

Vertical screen

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

Horizontal screen

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

2: JS determines horizontal screen and vertical screen

1. //判断手机横竖屏状态：   
   window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {   
           if (window.orientation === 180 || window.orientation === 0) {    
               alert('竖屏状态！');   
           }    
           if (window.orientation === 90 || window.orientation === -90 ){    
               alert('横屏状态！');   
           }     
       }, false);

//移动端的浏览器一般都支持window.orientation这个参数，通过这个参数可以判断出手机是处在横屏还是竖屏状态。

The window.orientation value corresponding to the screen orientation:

ipad,iphone: 90 or -90 for horizontal screen
ipad,iphone: 0 or 180 for vertical screen
Andriod: 0 or 180 horizontal screen
Andriod: 90 or -90 vertical screen

Related recommendations:

HTML5 actual combat and analysis judgment mobile horizontal screen Vertical screen function

Code based on jQuery to determine whether iPad, iPhone, Android is horizontal or vertical screen_jquery

The page forces horizontal screen

The above is the detailed content of How to determine horizontal and vertical screens in mobile HTML5. For more information, please follow other related articles on the PHP Chinese website!