基本概念

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>

html5——全屏显示的更多相关文章

  1. HTML5 全屏特性

    全屏功能是浏览器很早就支持的一项功能了,可以让你页面中的video, image ,div 等等子元素实现全屏浏览,从而带来更好的视觉体验,来看看怎么使用吧.先来看看有哪些API和事件支持. API ...

  2. 全屏显示网页FULLSCREEN API

    第一次看到应用 Fullscreen API 全屏显示网页,是 FaceBook 中的照片放大.作为一个比较新的 API,目前只有 Safari.Chrome 和 FireFox 三种浏览器支持该特性 ...

  3. javascript full screen 全屏显示 页面元素

    javascript full screen 全屏显示 页面元素 要想让页面的某个元素全屏显示,就像在网页上看视频的时候,可以全屏观看一样,该怎么实现呢? 一种最简单的方式,就是动态改变你想要全屏显示 ...

  4. HTML5全屏浏览器兼容方案

    最近一个项目有页面全屏的的需求,搜索了下有HTML5的全屏API可用,不过各浏览器的支持不一样. 标准 webkit  Firefox  IE Element.requestFullscreen() ...

  5. How to Use HTML5 FUll Screen API（如何使用HTML5全屏接口） 【精】

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 如果你不太喜欢变化太快的东西,那么web开发可能不适合你.我曾在2012年末有写过Fu ...

  6. How to Use HTML5 FUll Screen API（怎样使用HTML5全屏接口）

    原文链接:http://www.sitepoint.com/use-html5-full-screen-api/ 假设你不太喜欢变化太快的东西,那么web开发可能不适合你. 我曾在2012年末有写过F ...

  7. HTML5全屏操作API

    一.定义:HTML5规范允许自定义网页上的任一元素全屏显示,存在兼容问题 二.使用: ①基本: Node.RequestFullScreen()开启全屏显示 Node.CancelFullScreen ...

  8. HTML5全屏背景视频与 CSS 和 JS（插件或库）

    译文原链接:http://codetheory.in/html5-fullscreen-background-video/ 前言: 当网页载入时,自动播放的全屏背景视频已经成为当前颇受欢迎的趋势. 就 ...

  9. JavaScript：让浏览器全屏显示

    并不是所有人都会按F11让浏览器全屏显示~~~ 一.直接上代码 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xh ...

随机推荐

  1. Inversion

    Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 4176   Accepted: 1857 Description The i ...

  2. MySQL: 打开binlog选项后无法重启MySQL

    binlog目录权限不足导致,用chown mysql:mysql <log folder>即可解决此问题.

  3. Username is not in the sudoers file. This incident will be reported

    type sudo adduser <username> sudo where username is the name of the user you want to add in th ...

  4. Yocto tips (17): Yocto License问题:restricted license not whitelisted in LICENSE_FLAGS_WHITELIST

    Yocto中能够配置一个Distrbution的License.然后全部的软件包,都须要符合这个license才干够被shipped到image中,假设我们须要使用违反此license的软件包,那么就 ...

  5. 传智播客JDBC视频教程

    视频介绍: 一些视频教程通过浅显案例来让刚開始学习的人感到轻松,可是课程中编写的代码不能直接应用于项目中:而本套视频教程正好相反,视频解说者李勇老师以技术见长.性格朴实无华.不善于幽默搞笑.李勇老师编 ...

  6. C++学习之extern "C"

    我们知道,extern关键字可以置于变量或者函数前,以标示变量或者函数的定义在别的文件中,提示编译器遇到此变量和函数时在其他模块中寻找其定义.这里起到的是声明作用范围的用处.另外,extern还可以与 ...

  7. Spark2.0 VS Spark 1.* -------SparkSession的区别

    Spark .0以前版本: val sparkConf = new SparkConf().setAppName("soyo") val spark = new SparkCont ...

  8. Android之NDK开发（转载）

    http://www.cnblogs.com/devinzhang/archive/2012/02/29/2373729.html 一.NDK产生的背景 Android平台从诞生起,就已经支持C.C+ ...

  9. PCB InCAM 获取 JOB STEP 实现外挂脚本调试功能实现

    PCB CAM自动化基于Incam 打造,在测试时经常遇到调试障碍,每次自行对功能测试时,生成了exe脚本后,再到Incam里面运行,发现问题,再回来修改代码,非常不爽, 参考Genesis调试运行模 ...

  10. 能够完成qq信息提醒的代码

    下面这个网址就帮咱们实现了QQ提醒的功能,别被它的外面吓坏,虽然是长的有点恶心,但是它可是一段“神奇代码”. http://qzs.qq.com/snsapp/app/bee/widget/open. ...