:fullscreen在大屏下的样式设置

前言

最近公司在做大屏显示，不过这个页面可以在大屏下显示，也可以在电脑上显示，不过显示的内容是不同的。

公司是用的小米电视，通过投屏来显示大屏，当大屏的时候，页面会自动隐藏一些元素，并对一些元素设置样式。对于这个需求是使用Document.onfullscreenchange 来给元素设置样式的。效果还是不错的！但是因为最近在学习CSS，所以还是去搜了搜CSS的解决方案，没想到还真有：:fullscreen,这是一个伪类。

前言

实话实说，就这兼容性，我觉得用起来完全没问题，而且我司只需要考虑Chrome！！！

前置知识

js中提供了两种全屏的的使用方法：

1. Element.requestFullscreen()：此方法会将浏览器设置为全屏模式，同时只有当前Element会显示在页面上，其他所有的元素全部被隐藏
2. document.documentElement.requestFullscreen()：此方法是对所有元素使用全屏。

正是因为这两种使用方法，导致我们在使用:fullscreen的时候也是两种使用方法。

:fullscreen

:fullscreen 是一个CSS伪类，当网页位于全屏的情况下，可以设置元素的全屏样式。

提一嘴：MDN上给出了一个例子，但是代码并没有给全，导致我在一开始使用，页面并没有显示出效果。

用法1- 全局

 #h1Full:fullscreen {
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>
复制代码

当我使用document.documentElement.requestFullscreen()对全部元素全屏的时候：此时会发现 #h1Full:fullscreen 这中写法并不会生效，此时:fullscreen应该是放在根元素上的（我猜测的）

用法2- 针对特定元素

上面我们还提到了Element.requestFullscreen()，这种全屏的方法。直接看下例子：

 #h1Full:fullscreen {
  background-color: aliceblue;
  color: #faa;
}
 :fullscreen #h1Full1{
  color: #faa;
}

 <h1 id="h1Full">我是h1Full:fullscreen</h1>
 <h1 id="h1Full1">我是fullscreen: #h1Full1</h1>
复制代码

在控制台种：使用document.getElementById('h1Full').requestFullscreen()，仅仅对h1Full进行了全屏，其他元素隐藏掉了。同时#h1Full:fullscreen 这种写法生效，并且元素占据了整个屏幕。

总结

对于大屏在不同的设备下需要不同的显示方式，使用:fullscreen是比较好的实现方案。当然考虑到兼容的话，可以考虑Document.onfullscreenchange来给元素设置样式。

tips

使用快捷键设置全屏，:fullscreen 是无法生效的。