# 全屏接口的使用

最新推荐文章于 2023-11-28 15:17:54 发布

7束QW

最新推荐文章于 2023-11-28 15:17:54 发布

阅读量247

点赞数

分类专栏：全屏接口的使用文章标签： css html javascript html5 css3

本文链接：https://blog.csdn.net/V8min/article/details/111651956

版权

本文介绍了如何使用全屏接口，包括开启全屏的requestFullScreen()、退出全屏的cancelFullScreen()以及检查全屏状态的FullscreenElement。同时，讨论了在不同浏览器（如谷歌、火狐和IE）中需要添加的不同前缀，如webkit-、moz-和ms-，以确保兼容性。此外，还提及了CSS和JavaScript在全屏接口应用中的作用。

摘要由CSDN通过智能技术生成

全屏接口的使用

1.开启全屏：requestFullScreen()

2.退出全屏:cancelFullScreen()

3.是否是全屏状态:FullscreenElement

兼容性：不同浏览器要添加不同前缀

谷歌：webkit- 火狐：moz- 微软IE：ms-

cancelFullScreen() & FullscreenElement 都是对document进行判断

CSS代码：

 <style>
        .box img {
    
            width: 400px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="box" id="box">
        <img src="images/f3.jpg" alt="" id=