判断横竖屏

css判断横竖屏

        /*orientation:portrait|landscape*/
        /*肖像（竖屏）模式*/
        @media only screen and (orientation: portrait) {
            body {
                background-color: skyblue;
            }
        }

        /*全景模式*/
        @media screen and (orientation: landscape) {
            body {
                background-color: red;
            }
        }    

js判断横竖屏

    // 监听横竖屏状态，发生变化，执行一次回调函数
    screen.orientation.addEventListener('change', function (e) {
        console.log(e)
        isHorizontalOrVertical()
    })

    // 判断当前屏幕是横屏还是竖屏（函数调用一次可判断一次）
    function isHorizontalOrVertical() {
        const orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

        if (orientation === "landscape-primary" || orientation === "landscape-secondary") {
            console.log("That looks good."); //针对横屏
        } else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
            console.log("Mmmh... you should rotate your device to landscape");  //针对竖屏
        } else if (orientation === undefined) {
            console.log("The orientation API isn't supported in this browser :("); //判断浏览器是否支持该api
        }
    }