H5 + vue 监听手机屏幕旋转及判断横竖屏

原创已于 2025-06-26 13:59:16 修改 · 1.2w 阅读

13 ·

CC 4.0 BY-SA版权

文章标签：

#判断横竖屏

于 2019-03-23 18:28:00 首次发布

Vue 同时被 2 个专栏收录

5 篇文章

订阅专栏

5+App

3 篇文章

订阅专栏

本文介绍了一个简单的屏幕适配方案，通过监听窗口大小变化来判断横竖屏，并给出相应的响应措施。需要注意的是，当执行页面适配操作时，由于虚拟DOM尚未完成渲染挂载，若需操作Vue实例，建议在`this.$nextTick()`中进行。

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

mounted () {
    // 监听 resize 方法
    window.addEventListener("resize", this.renderResize, false)
},
beforeDestroy () {
    // 移除监听
    window.removeEventListener("resize", this.renderResize, false)
}

methods: {
    renderResize() {
        // 判断横竖屏
        let width = document.documentElement.clientWidth
        let height = document.documentElement.clientHeight
        if (width > height) {
            alert('横屏')
        }
        // 做页面适配
        // 注意：renderResize 方法执行时虚拟 dom 尚未渲染挂载，如果要操作 vue 实例，最好在 this.$nextTick() 里进行。
    }
}