监听设备方向变化?分享 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 -
相关推荐
Bdygsl2 小时前
前端开发:CSS(2)—— 选择器
前端·css
斯~内克2 小时前
CSS包含块与百分比取值机制完全指南
前端·css·tensorflow
努力奋斗18 小时前
VUE-第二季-02
前端·javascript·vue.js
Sane9 小时前
react函数组件怎么模拟类组件生命周期?一个 useEffect 搞定
前端·javascript·react.js
gnip9 小时前
可重试接口请求
前端·javascript
gnip10 小时前
滚动元素到可视区
前端·javascript
归辞...10 小时前
「iOS」————单例与代理
开发语言·javascript·ios
JSON_L11 小时前
Vue 详情模块 3
前端·javascript·vue.js
flashlight_hi11 小时前
LeetCode 分类刷题:2824. 统计和小于目标的下标对数目
javascript·数据结构·算法·leetcode
大熊学员12 小时前
HTML与JavaScript的羁绊
前端·css·html