Mobile terminal horizontal and vertical screen detection

1. HTML method detection

Quote the horizontal and vertical screen styles in html

<!-- 引用竖屏的CSS文件 portrait.css -->
  <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" rel="external nofollow">
  
  <!-- 引用横屏的CSS文件 landscape.css -->
  <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" rel="external nofollow">

Two, CSS method detection

In css, the media query method is used to determine whether the screen is horizontal or vertical

    /* 竖屏 */
    @media screen and (orientation:portrait) {
      /* 这里写竖屏样式 */
    }

    /* 横屏 */
    @media screen and (orientation:landscape) {
      /* 这里写横屏样式 */
    }

Three, JS method detection

[1] orientationChange event

Apple has added an orientationchange event to mobile Safari. The orientationchange event is triggered when the vertical and horizontal orientation of the device changes.

    window.addEventListener("orientationchange",function(){
        alert(window.orientation);
    });

[2] orientation attribute

window.orientation Gets the horizontal and vertical status of the phone. There are 4 values in the window.orientation property: 0 and 180 are vertical screens (180 is the inverted vertical screen), 90 and -90 are horizontal screens (-90 is Horizontal screen upside down)

0 means portrait mode, 90 means landscape mode rotated to the left (the "Home" button is on the right), -90 means landscape mode is rotated to the right (the "Home" button is on the left), and 180 means the iPhone is facing down ; But this model has not yet been supported. The figure shows the meaning of each value of window.orientation.

【3】Case

Detect the user’s current mobile phone horizontal and vertical screen state, if it is in horizontal screen state, prompt the user "For a better viewing experience, please browse in the vertical screen", otherwise no prompt

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    #box {
      position: fixed;
      box-sizing: border-box;
      padding: 50px;
      display: none;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, .5);
    }

    #box span {
      margin: auto;
      font: 20px/40px "宋体";
      color: #fff;
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="box"><span>为了更好的观看体验，请在竖屏下浏览</span></div>
  <script>
    window.addEventListener("orientationchange", toOrientation);
    function toOrientation() {
      let box = document.querySelector("#box");
      if (window.orientation == 90 || window.orientation == -90) {
        // 横屏-显示提示
        box.style.display = "flex";
      } else {
        // 横屏-隐藏提示
        box.style.display = "none";
      }
    }
  </script>
</body>

</html>

Articles are continuously updated every week. You can search for " Front-end Collection " on WeChat to read it for the first time, and reply to [ Video ] [ Book ] to receive 200G video materials and 30 PDF book materials