移动端判断是否处于横屏还是竖屏状态

最新推荐文章于 2024-05-28 13:54:53 发布

正在输入代码中

最新推荐文章于 2024-05-28 13:54:53 发布

阅读量1.1k

点赞数

分类专栏： web前端文章标签：移动 js

本文链接：https://blog.csdn.net/qq_26744901/article/details/52346333

版权

web前端专栏收录该内容

145 篇文章 0 订阅

订阅专栏

<style>
    @media screen and (orientation:portrait) {
        /* portrait-specific styles */
    }
    /* landscape */
    @media screen and (orientation:landscape) {
        /* landscape-specific styles */
    }
</style>

<script type="text/javascript">
    var mql = window.matchMedia("(orientation: portrait)");
    if(mql.matches) {
        alert("竖屏");
    } else {
        alert("横屏");
    }
    // 添加一个媒体查询改变监听者
    mql.addListener(function(m) {
        if(m.matches) {
            alert("竖屏");
        }
        else {
            alert("横屏");
        }
    });
</script>