javascript - Webkit-Transform:Scale 在 HTML5 全屏模式下不起作用（仅限 Chrome）

Question

我正在开发一个项目，该项目需要页面根据页面放大所有元素（对于好奇：从 XBMC 皮肤生成 html）。

缩放在窗口模式下工作

使用 Chrome 全屏模式进行缩放

缩放不适用于 HTML5 requestFullScreen（注意黑色空间）

现在我遇到的问题是，在 Chrome 中，当您使用全屏链接时，主体不会按比例放大（就像您刚刚一样View -> Enter FullScreen。它似乎得到了正确的尺寸，但-Webkit-Transform: scale(x, y)似乎没有效果

提前致谢！

score 2 · Accepted Answer

我有类似的问题。看起来当你让任何元素全屏时，它的比例被忽略（我也尝试在全屏后设置比例，仍然不起作用）。解决方案是制作额外的包装块，不缩放并将其设置为全屏。

这不起作用，当我制作#fsdiv 全屏时（它没有全屏缩放）：

<div id="fsdiv" style="transform:scale(5);transform-origin: left top;">
  Hi there!
</div>

这有效：

<div id="fsdiv">
  <div style="transform:scale(5);transform-origin: left top;">
    Hi there!
  </div>
</div>

score 1 · Accepted Answer

通过使用修复

        document.body.webkitRequestFullScreen();

代替

    document.getElementById("MediaCenter").webkitRequestFullScreen();

看来，当您在元素上使用 webKitRequestFullScreen 时，某些应用于外部元素（如主体）的 CSS 不起作用。找不到有关此行为的任何文档，但如果我发现任何内容，我会更新此答案

2 回答 2