zoukankan html css js c++ java

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>

查看全文

相关阅读:
Java 传递参数时，传递一个变量快还是传递一个实体类？
13 设计模式
 12 反射
 11.多线程&&并发
 10.输入输出
 9.异常Exception
7.正则表达式
 5.数组
 6.常见对象
 上传本地项目到Github

原文地址：https://www.cnblogs.com/wuqiuxue/p/8116978.html