移动端横竖屏监听小记（window.orientation、orientation）

最新推荐文章于 2025-03-22 12:36:55 发布

start_sea

最新推荐文章于 2025-03-22 12:36:55 发布

阅读量1.6k

点赞数 1

文章标签： css 前端 html html5 css3

本文链接：https://blog.csdn.net/start_sea/article/details/129800267

版权

本文介绍了移动端开发中横竖屏监听的两种方法：通过window.orientation属性进行监听，以及利用CSS媒体查询的orientation属性来适配样式。第一种适用于需要额外逻辑处理的情况，第二种则适合仅调整CSS样式的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

移动端横竖屏监听小记（window.orientation、orientation）

移动端业务开发中经常会碰到横竖屏的需求，要么需要做适配，要么也得给个提示，增强用户体验。以下是做移动端横竖屏监听的两种简单方式：

1、window.orientation方式：
二话不说直接上代码：

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

在这里插入图片描述
简单逼逼两句：不干别的，就是监听，其实是老属性了，监听window.orientation的数值做判断，其