监听设备方向变化?分享 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 -
相关推荐
luquinn6 小时前
实现统一门户登录跳转免登录
开发语言·前端·javascript
烛阴6 小时前
TypeScript 类型魔法:像遍历对象一样改造你的类型
前端·javascript·typescript
前端无冕之王7 小时前
一份兼容多端的HTML邮件模板实践与详解
前端·css·数据库·html
啃火龙果的兔子7 小时前
js获取html元素并设置高度为100vh-键盘高度
javascript·html·计算机外设
wifi歪f11 小时前
🎉 Stenciljs,一个Web Components框架新体验
前端·javascript
不爱说话郭德纲12 小时前
👩‍💼产品姐一句小优化,让我给上百个列表加上一个动态实时计算高度的方法😿😿
前端·vue.js·性能优化
知识分享小能手12 小时前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
李剑一12 小时前
别乱封装,你看出事儿了吧...
前端·vue.js
gongzemin12 小时前
Vue 项目权限管理 路由 按钮权限
前端·vue.js
Flame_12 小时前
一行代码搞定Vue3异步请求:vue3-request让状态管理从地狱到天堂
vue.js