使用JavaScript 和 CSS 判断横屏或竖屏方向

在项目需求中，需要判断设备的横屏或竖屏方向来实现不同的功能以及样式处理，对应的JavaScript和CSS代码如下：

使用 JavaScript 判断横屏或竖屏方向

<template>  
    <div class="view">  
        {{ isLandscape ? '横屏' : '竖屏' }}  
    </div>  
</template>
  
<script>  
    export default {  
        name: 'View',  
        data() {  
            return {  
                screenOrientation: '',  
            }  
        },  
        created() {  
            this.getScreenOrientation();  
        },  
        mounted() {  
            window.addEventListener('resize', this.getScreenOrientation);  
        },  
        computed: {  
            isLandscape() {  
                console.log(this.screenOrientation === 'landscape' ? '横屏' : '竖屏');  
                return this.screenOrientation === 'landscape';  
            }  
        },  
        methods: {  
            //使用JavaScript判断横屏或竖屏方向
            getScreenOrientation() {  
                let screenWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;  
                let screenHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;  
                this.screenOrientation = screenWidth > screenHeight ? 'landscape' : 'portrait';  
                
                /*  
                    // 或者  
                    // 横屏  
                    if (window.orientation === 90 || window.orientation === -90 ){  
                    this.screenOrientation = 'landscape'  
                    }  
                    // 竖屏  
                    if (window.orientation === 180 || window.orientation === 0) {  
                    this.screenOrientation = 'portrait'  
                    }  
                */
            },  
        },  
        beforeDestroy() {  
            window.removeEventListener('resize', this.getScreenOrientation);  
        }  
    }  
</script>

注意⚠️：window.orientation是一个只读属性，用于获取设备窗口的方向信息。它返回一个表示窗口方向的数值，可以是以下四个值之一：

• 0: 正常方向，竖屏状态（默认）
• 90: 顺时针旋转90度，横屏向左
• -90: 逆时针旋转90度，横屏向右
• 180: 180度翻转，倒立的竖屏

要使用window.orientation来判断设备的横屏或竖屏方向，请注意以下事项：

1. window.orientation仅在移动设备上有效，对于桌面设备始终返回undefined。
2. 在现代浏览器中，推荐使用CSS媒体查询或JavaScript监听窗口大小改变事件来判断方向，而不是依赖window.orientation属性。
3. 在某些浏览器中，window.orientation可能已被废弃，建议使用其他方法进行方向判断。

虽然window.orientation属性可以提供设备窗口方向的信息，但由于兼容性和限制，它并不是最佳的方向判断方法。推荐使用前述的JavaScript和CSS方法来判断设备的横屏或竖屏方向。

使用 CSS 判断横屏或竖屏方向

@media screen and (orientation: landscape) {  
    /* 横屏样式 */  
    .view {  
        width: 100%;  
        height: 100vh;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 0.36rem;  
        color: white;  
        background-color: green;  
    }  
}  
  
@media screen and (orientation: portrait) {  
    /* 竖屏样式 */  
    .view {  
        width: 100%;  
        height: 100vh;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
        font-size: 0.36rem;  
        color: white;  
        background-color: blue;  
    }  
}

效果如图