html5——全屏显示

基本概念

1、HTML5规范允许用户自定义网页上任一元素全屏显示

2、requestFullscreen() 开启全屏显示、cancleFullscreen() 关闭全屏显示

3、不同浏览器兼容性不一样

4、全屏伪类div:-ms-fullscreen，表示在全屏后的状态

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        div:-ms-fullscreen {
            width: 600px;
        }

        div:-moz-full-screen {
            height: 400px;
        }

        div:-webkit-full-screen {
            height: 400px;
        }
    </style>
</head>
<body>
<div></div>
<script>
    var div = document.getElementsByTagName("div")[0];
    div.onclick = function () {
        if (this.requestFullscreen) {
            this.requestFullscreen();
        }
        else if (this.mozRequestFullScreen) {
            console.log(this.mozRequestFullScreen);
            this.mozRequestFullScreen();
        }
        else if (this.webkitRequestFullScreen) {
            console.log(this.webkitRequestFullScreen);
            this.webkitRequestFullScreen();
        }
    }
</script>
</body>
</html>