JS 网页设置横竖屏切换

娜娜啊吖

已于 2022-08-08 17:01:55 修改

阅读量3.1k

点赞数

分类专栏： JS 文章标签： javascript 前端开发语言

于 2022-08-08 17:00:18 首次发布

本文链接：https://blog.csdn.net/pqn_cc/article/details/126231324

版权

JS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

JS 网页设置横竖屏切换

<!DOCTYPE html>
<html>
  <head>
    <meta
      http-equiv="Content-Type"
      content="application/xhtml+xml;charset=UTF-8"
    />
    <meta name="viewport" content="width=device-width" />
    <title>手机横、竖屏事件</title>
  </head>
  <body onload="screenOrientationEvent()">
    <span id="change"></span>
  </body>
</html>

 <script language="javascript" type="text/javascript">
      //屏幕方向标识，0横屏，其他值竖屏
      var orientation = 0;
      var innerWidthTmp = window.innerWidth;
      //转屏事件，内部功能可以自定义
      function screenOrientationEvent() {
        if (orientation == 0) {
          document.getElementById("change").innerHTML = "竖屏";
        } else {
          document.getElementById("change").innerHTML = "横屏";
        }
      }
      //横竖屏事件监听方法
      function screenOrientationListener() {
        try {
          //获取可视窗口文档显示区宽度
          var iw = window.innerWidth;
          //屏幕方向改变处理
          if (iw != innerWidthTmp) {
            if (iw > window.innerHeight) {
              orientation = 90;
            } else {
              orientation = 0;
            }
            //调用转屏事件
            screenOrientationEvent();
            innerWidthTmp = iw;
          }
        } catch (e) {
          alert(e);
        }
        //间隔固定事件检查是否转屏，默认500毫秒
        setTimeout("screenOrientationListener()", 100);
      }
      //启动横竖屏事件监听
      screenOrientationListener();
    </script>