全屏 横屏

<template>
    <div class="full" id="main">
        <div>
            <p>当前屏幕方向：{{pageArrow}}</p>
            <p @click="fullScreen()">进入全屏</p>
            <p @click="closeFullScreen()">退出全屏</p>
        </div>
    </div>
</template>

<script type="text/javascript">

export default {
    data(){
        return {
            pageArrow: '|||竖屏状态|||',
            fullState: false    // 当前是否全屏
        }
    },
    methods: {

        // document 进入全屏
        fullScreen() {
            var width = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight;
            console.log("fullState", this.fullState, width, height);

            this.fullState = true;
            // console.log("fullState", this.fullState);
            var docElm = document.documentElement;
            if(docElm.requestFullscreen) {
                docElm.requestFullscreen();
            } else if(docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            } else if(docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            } else if(docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
        },

        // document 退出全屏
        closeFullScreen() {
            var width = document.documentElement.clientWidth,
                height = document.documentElement.clientHeight;
            console.log("fullState", this.fullState, width, height);

            // console.log("fullState", this.fullState);
            if (this.fullState == false) return;
            if(document.exitFullscreen) {
                document.exitFullscreen();
            } else if(document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            } else if(document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            } else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            this.fullState = false;
        },


        // 判断横竖屏
        isHorVer() {
            let _this = this;
            window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", function() {
                if (window.orientation === 180 || window.orientation === 0) {
                    _this.pageArrow = '|||竖屏状态|||';
                    console.log('竖屏状态！');
                }
                if (window.orientation === 90 || window.orientation === -90 ){
                    _this.pageArrow = '---横屏状态---';
                    console.log('横屏状态！');
                }
            }, false);
        },


        // entryHorizontal(){
            detectOrient() {
                var width = document.documentElement.clientWidth,
                    height = document.documentElement.clientHeight,
                    wrapper = document.getElementById("main"),
                    style = "";
                    // console.log('el>>', width, height)
                    // console.log(wrapper)
                if(width >= height) { // 竖屏
                    style += "width:100%";
                    style += "height:100%;";
                    style += "-webkit-transform: rotate(0); transform: rotate(0);";
                    style += "-webkit-transform-origin: 0 0;";
                    style += "transform-origin: 0 0;";
                } else { // 横屏
                    style += "width:" + height + "px;";// 注意旋转后的宽高切换
                    style += "height:" + width + "px;";
                    style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
                    // 注意旋转中点的处理
                    style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                    style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
                }
                wrapper.style.cssText = style;

                // var width = document.documentElement.clientWidth,
                // height = document.documentElement.clientHeight;
                console.log("detectOrient", width, height);
            }
            // window.onresize = detectOrient;
        // }






    },
    created(){
        
    },
    mounted(){
        // this.fullScreen();
        this.isHorVer();
        // window.onresize = detectOrient;
        this.detectOrient();
    },
    beforeCreate() {
        document.querySelector('body').setAttribute('style', 'background:lightgreen')
    },
    beforeDestroy() {
        document.querySelector('body').removeAttribute('style')
    }


}

</script>

<style type="text/css" scoped>

button{

}


p{
    height: .8rem;
    line-height: .8rem;
    border-bottom: .01rem solid #ccc;
    text-align: center;
}


</style>