移动端页面判断横屏显示竖屏显示

和风微凉

已于 2023-07-12 17:58:50 修改

阅读量173

点赞数

文章标签： javascript 前端 html css

于 2023-07-12 16:24:14 首次发布

本文链接：https://blog.csdn.net/qq_45609680/article/details/131684508

版权

方法一、

link引用判断

<!--引用竖屏样式-->
<link rel="stylesheet" media="all and (orientation:portrait)" href="../*****.css" rel="external nofollow" >
<!--引用横屏样式-->
<link rel="stylesheet" media="all and (orientation:landscape)" href="../******.css" rel="external nofollow" >

方法二、

css判断

<style>
@media (orientation: portrait ){
    //竖屏CSS
}
@media ( orientation: landscape ){
    //横屏CSS
}
</style>

方法三、

js判断

$(function(){
    window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
    if (window.orientation === 180 || window.orientation === 0) {
        alert('竖屏状态！');
    }
    if (window.orientation === 90 || window.orientation === -90 ){
        alert('横屏状态！');
    }
    }, false);
})

用户改变设备查看模式时会触发onorientationchange事件

orientation有4个值：0，90，-90，180 值为0或180的时候为竖屏(180为倒过来的竖屏)；值为90或-90时为横屏（-90为倒过来的横屏模式）；

Vue监听：


mounted () {
    this.$nextTick(() => {
       window.addEventListener("resize", this.renderResize, false)
    })
},
methods: {
     renderResize() {
         // 判断横竖屏
         let width = document.documentElement.clientWidth
         let height = document.documentElement.clientHeight
         if(width > height) {
             alert('横屏')
         }
     },
}