orientation属性判断横竖屏

Posted 2021-11-27 tu-0718

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了orientation属性判断横竖屏相关的知识，希望对你有一定的参考价值。

　　现在有一个需求：移动端网页默认竖屏显示，当用户横屏浏览，就给予相应提示，比如横屏时显示下面截图提示信息

　　技术图片

　　几年前，可能大家想到用 window.orientation 属性来实现，现官方已弃用，不做推荐，并且有了更好的实现方式—— orientation

　　orientation: portrait（竖屏，即设备中的页面可见区域高度>=宽度）

　　orientation: landscape（横屏，即设备中的页面可见区域高度<=宽度）

　　下面是一个很简单的 demo，有兴趣的小伙伴可以感受一下

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8" />
        <title>识别横竖屏</title>
        <style>
            @media (orientation: landscape) {
                body {
                    background-color: #ccc;
                }
            }
            
            @media (orientation: portrait) {
                body {
                    background-color: #000;
                }
            }
        </style>
    </head>

    <body>
    </body>

</html>

以上是关于orientation属性判断横竖屏的主要内容，如果未能解决你的问题，请参考以下文章