H5 判断横竖屏

Ctrl C 、 Ctrl V => OK

我这边是直接在App.vue文件中做的。

        <!-- 选择禁止横屏或竖屏显示-->
        <div id="orientLayer" class="mod-orient-layer" v-if="!data.portrait">
            <div class="mod-orient-layer__content">
                <i class="icon mod-orient-layer__icon-orient" />
                <div class="mod-orient-layer__desc">
                    为了更好的体验，请使用竖屏浏览
                </div>
            </div>
        </div>

<script lang="ts">
import {
    computed,
    onMounted,
    reactive,
    ref,
    watch,
    onBeforeUnmount,
} from "vue";

export default {
    name: "APP",
    setup() {
        const data = reactive({
            portrait: false,
        });
        const methods = {
            renderResize: () => {
                // 判断横竖屏
                let width = document.documentElement.clientWidth;
                let height = document.documentElement.clientHeight;
                // alert(width+"宽高"+height)
                if (width > height) {
                    console.warn("横屏");
                    data.portrait = false;
                } else {
                    console.warn("竖屏");
                    data.portrait = true;
                }
                // 做页面适配
                // 注意：renderResize方法执行时虚拟dom尚未渲染挂载，如果要操作vue实例，最好在this.$nextTick()里进行。
            },
        };
        onMounted(async () => {
            addEventListener("resize", methods.renderResize, false);
        });
        onBeforeUnmount(() => {
            removeEventListener("resize", methods.renderResize, false);
        });
        return {
            data,
            ...methods,
        };
    },
};
</script>

/*横竖屏代码*/
@-webkit-keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    50%,
    60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
}

@keyframes rotation {
    10% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    50%,
    60% {
        transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
    }
    90% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
    100% {
        transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
    }
}

#orientLayer {
    display: none;
}

@media screen and (min-aspect-ratio: 13/9) {
    #orientLayer {
        display: block;
    }

    body {
        width: 100%;
        height: 100%;
    }
}

.mod-orient-layer {
    display: none;
    position: fixed;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: #000;
    z-index: 9997;
}

.mod-orient-layer__content {
    position: absolute;
    width: 100%;
    top: 45%;
    margin-top: -75px;
    text-align: center;
}

.mod-orient-layer__icon-orient {
    background-image: url("~@/h5/assets/portrait.png");
    display: inline-block;
    width: 70px;
    height: 112px;
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    -webkit-animation: rotation infinite 1.5s ease-in-out;
    animation: rotation infinite 1.5s ease-in-out;
    -webkit-background-size: 70px;
    background-size: 70px;
}

.mod-orient-layer__desc {
    margin-top: 20px;
    font-size: 15px;
    color: #fff;
}

效果