全面屏限制

<template>
    <div
        id="app"
        :class="isFullScreen ? 'limit' : ''"
        :style="{ overflow: showRules ? 'hidden' : 'auto' }"
    >
    </div>
</template>

<script>
export default {
    name: "App",
    components: {

    },
    data() {
        return {
            // 全面屏限制
            isFullScreen: false,
        };
    },
    created() {
        // 全面屏限制
        this.fullScreenLimit();
        window.addEventListener("resize", () => {
            this.fullScreenLimit();
        });
    },
    methods: {
        // 全面屏限制
        fullScreenLimit() {
            const rate = window.screen.width / window.screen.height;
            let limit = window.screen.width === window.screen.availWidth ? 1.8 : 1.65; // 临界判断值
            // window.screen.height为屏幕高度
            //  window.screen.availHeight 为浏览器 可用高度
            this.isFullScreen = rate > limit;
        }
    }
};
</script>

<style scoped lang="scss">
#app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    font-size: 32px;
    text-align: center;
    color: #2c3e50;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.limit {
    position: fixed;
    left: 0;
    top: -89px !important;
    width: 100%;
    height: calc(100%+89px) !important;
    overflow: hidden;
}
</style>