监听设备方向变化?分享 1 段优质 JS 代码片段!

大家好,我是大澈!

本文约 700+ 字,整篇阅读约需 1 分钟。

每日分享一段优质代码片段。

今天分享一段 JS 代码片段,用于在H5端监听设备方向的变化。

老规矩,先阅读代码片段并思考,再看代码解析再思考,最后评论区留下你的见解!

js 复制代码
$(document).ready(function() {
    function handleOrientationChange() {
        if (window.orientation === 0 || window.orientation === 180) {
            // Portrait
            $('body').css('transform', 'rotate(90deg)');
        } else {
            // Landscape
            $('body').css('transform', 'rotate(0deg)');
        }
    }

    // Listen for orientation changes
    $(window).on("orientationchange", handleOrientationChange);

    // 页面加载时进行初始方向检测
    handleOrientationChange();
});

分享原因

这段代码提供了一个实用的解决方案,可以检测设备方向的变化并根据方向更改页面的样式。

这在移动设备上非常有用,因为用户可能会旋转他们的设备来更好地查看内容。

代码解析

  1. $(document).ready(function() { ... });

确保页面DOM完全加载后再运行内部代码。

这是一个jQuery的基础方法。

2. if (window.orientation === 0 || window.orientation === 180)

检查设备方向是否为竖屏模式(0度或180度)。

这里是代码最关键的地方。

3. $('body').css('transform', 'rotate(90deg)');

如果是竖屏模式,旋转页面90度。否则(横屏模式),恢复正常的旋转角度(0度)。

这里的代码可以自定义,按项目实际需求来写即可,就是在旋转时打算要做的操作或者要调整的样式。

4. $(window).on("orientationchange", handleOrientationChange);

监听窗口的orientationchange事件,当设备方向变化时调用handleOrientationChange函数。

  • end -
相关推荐
mCell7 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip7 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping13 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙14 小时前
[译] Composition in CSS
前端·css
白水清风14 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780014 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端14 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧14 小时前
Promise 的使用
前端·javascript
天天扭码14 小时前
来全面地review一下Flex布局(面试可用)
前端·css·面试
用户4582031531715 小时前
CSS特异性:如何精准控制样式而不失控?
前端·css