HTML5怎样实现全屏

HTML5全屏算是一个比较新的技术,并不是所有的浏览器都兼容,咪咪我推荐各位小伙伴使用搜狗浏览器来练习这个技术。下面咪咪我就来讲解一下HTML全屏api怎么用。

操作方法

  • 01

    首先,先设置一个h3的标签,还有设置一个p标签,并且给它们添加id。

  • 02

    然后再写一个script标签,注意,script标签要放在body标签的后边哦,这点很重要。

  • 03

    然后通过id来获取到h3和p标签,并且保存在变量里面。获取id的方法是通过document.getElementById来的,注意大小写哦。

  • 04

    然后我们给h3绑定一个事件,如图所示,通过addEventListener()来绑定,click表示的是点击事件。

  • 05

    接着我们再来调用RequestFullScreen()方法,表示全屏,这里我在前面加了webkit表示的是谷歌内核。只要是谷歌内核的浏览器都可以使全屏生效,搜狗浏览器就是谷歌内核。

  • 06

    接着来预览,如图,只要我们点击“全屏”,那么下面的内容就会全屏显示了哦。

  • 07

    如图,咪咪我之前点击了“全屏”,所以现在p标签里面的内容就会全屏显示了哦,如果要退出全屏,按Esc键即可。

  • 08

    为了兼容不同内核的浏览器,我就多写了一些代码,大家也可以多测试一下。

  • 09

    全屏源代码示例,保存即可查看效果。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <h3 id="myh3">全屏</h3> <p id="myp"> 搜狗指南 搜狗指南 搜狗指南 </p> </body> <script> var h3=document.getElementById("myh3"); var p=document.getElementById("myp"); h3.addEventListener("click",function(){ p.webkitRequestFullScreen(); p.msRequestFullScreen(); p.oRequestFullScreen(); p.mozRequestFullScreen(); }); </script> </html>

(0)

相关推荐

  • ipad mini2越狱后全屏设置方法

    本文将要为大家眼都是的是ipad mini2微信全屏设置方法,先要在ipad mini2上全屏是使用微信吗?其实设置方案很简单哦~不过我们首先要将ipad mini2越狱才能继续后面的操作,此方法同样 ...

  • ipad微信怎么全屏?ipad微信无法全屏的解决方法教程

    很多朋友在问ipad微信怎么全屏,下文就将演示ipad微信不能全屏解决方法,亲测成功哦~如果你想在ipad上全屏使用微信等应用,那么就请按照下文的方法操作吧~ 经小编测试微信5.0已经能正常发图,不会 ...

  • win7玩游戏怎么全屏 Win7玩魔兽世界不能全屏的解决办法

    魔兽世界是目前非常热门的大众网络游戏,在热门大众网络游戏排名前五位,喜欢玩游戏的朋友相信对这款热门游戏并不陌生,不过有许多朋友遇到过电脑玩玩魔兽世界不能全屏的情况,针对win7魔兽不能全屏问题很多电脑 ...

  • iPad应用怎么全屏显示以微信为例

    很多使用iPad的用户在使用应用的时候想让应用全屏,不过不知道方法。这里小编就以微信为例子,告诉大家越狱后怎么将iPad应用全屏。 经本人测试微信5.0已经能正常发图。不会闪退。【我们这里使用微信做例 ...

  • IE浏览器实现全屏的2种方法

    虽然现在出了不少浏览器,例如腾讯TT、傲游、火狐什么的,已经很少人会用IE,但是IE不仅作为Windows自带的浏览器,还是有一定作用的,这里等笔者分享一下全屏的方法。 方法一:普通情况下,IE里有快 ...

  • 为什么Win8游戏不能全屏 Win8玩游戏不能全屏的解决办法

    之前在Win7系统中不少朋友遇到Win7游戏不能全屏的情况,如今Win8系统也有网友遇到类似问题,不过Win8正式版还未正式发布,10月26日开始正式发售,有网友称目前Win8游戏不能全屏的主要原因是 ...

  • win7玩游戏怎么全屏 图解Win7系统下玩游戏无法全屏的3套方案

    第一、Windows7下游戏全屏问题通用解决方法 修改注册表解决游戏全屏显示问题 Win键+R键,打开运行窗口,输入regedit 回车,这样就打开了注册表编辑器,然后,定位到以下位置: HKEY_L ...

  • FolderBoard介绍和安装教程 可以让iOS7系统文件夹全屏化

    FolderBoard 是一款最近新上架的小插件,大家都知道 iOS 的 Folder 都是以正方形小窗口打开的,这款插件可以让 Folder 文件夹直接以全屏形式打开。安装这个插件的直接好处就是让整 ...

  • 为什么打开网页不是全屏 怎么设置网页全屏方法介绍

    今天小编打开的网页老不是全屏,要全屏还得按右上角的最大化,在哪里设置,一打开网页就是全屏的呢? 如下图所示: 研究了半天,才发现这是IE设置的问题!并找出了三个解决方法 解决方法一新开一个IE窗口,手 ...