HTML页面的全屏显示-Fullscreen API

使用 Fullscreen api 处理页面全屏

HTML 页面的全屏显示

使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象

整个页面全屏显示

比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。

示例代码：

  
    

      全屏显示案例
      进入全屏
    
  
  

参数

requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
可选值为 auto, hide, show, 默认值为 auto.

当元素不在文档内时, 调用requestFullScreen回失败

  
    

      全屏显示案例
      进入全屏
    
  
  

部分内容进入全屏状态

是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.

示例代码：

  

    
  
  
    

      全屏显示案例
      进入全屏
    
    

      部分全屏
      进入全屏
    

退出全屏

退出全屏只需要调用 document 对象的 exitFullscreen. 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

示例代码

  

    
  
  
    

      全屏显示案例
      进入全屏
      退出全屏
    
    

      部分全屏
      进入全屏
      退出全屏
    

注意该方法是 document 对象的而不是对应元素的

事件与属性

当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件.
document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.

示例代码

  

    
  
  
    

      全屏显示案例
      进入全屏
      退出全屏
    
    

      部分全屏
      进入全屏
      退出全屏
    

元素的全屏样式

使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效.
是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement.
如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效

注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用

示例代码

  
    
  
  
    

      fullscreen 伪类案例
      进入全屏
    
  
  

解决兼容性问题

兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.