Javascript requestFullScreen（）是否仅适用于宽度和相对位置？

我正在用canvas编程，希望添加全屏支持。我发现API及其工作方式存在一些问题：

首先，我认识到全屏模式使用显示器的全宽。但我的画布元素是正方形的，所以并不是所有的高度都显示在16:9的显示器上。是否可以根据元素的高度全屏显示

另一个问题是，全屏似乎不支持绝对定位元素。我的代码如下所示：

<div id="canvasWrapper" style="positon: relative;">
    <p><button ng-click="fullscreen()">Go Fullscreen</button></p>
    <canvas id="bgCanvas" style="position: absolute; border: 1px #E5E5E5 solid;"></canvas>
    <canvas id="canvas" style="position: absolute; border: 1px #E5E5E5 solid;"></canvas>
</div>

全屏

这段代码为我的画布启用了多个层。但当我全屏显示div“canvasWrapper”时，生成的屏幕居中且非常小

是否可以根据元素的高度全屏显示

不，全屏模式不关心它从中启动的元素的比例-它将使用屏幕尺寸作为目标

您需要在代码中通过填充边来处理此问题

另一个问题是，全屏似乎不支持绝对定位元素

就我所能看到的而言，这本书并没有说什么，只是浏览了一下。然而，全屏模式目前在大多数主流浏览器中都处于实验状态，而且其行为可能因浏览器而异，而且不稳定，容易出现错误

发件人：

值得注意的是Gecko和WebKit之间的一个关键区别 此时的实现：Gecko自动将CSS规则添加到 要拉伸它以填充屏幕的元素：“宽度：100%；高度： 100%". WebKit不会这样做；相反，它将全屏居中 屏幕中相同大小的元素，否则为黑色。得到 与WebKit中的全屏行为相同，您需要添加自己的 “宽度：100%；高度：100%；”CSS规则适用于元素本身[…] 另一方面，如果您试图模仿WebKit在上的行为 Gecko，你需要把你想展示的元素放进去 另一个元素，您将改为全屏显示，并使用CSS 调整内部元素以匹配所需外观的规则

如果您还没有，您应该在不同的浏览器中检查结果，看看您正在经历的行为是否不同或相同