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

【问题标题】：Webkit-Transform:Scale doesn't work in HTML5 FullScreen mode (chrome only)Webkit-Transform:Scale 在 HTML5 全屏模式下不起作用（仅限 Chrome）
【发布时间】：2012-06-04 02:15:20
【问题描述】：

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

在窗口模式下进行缩放

使用 Chrome 全屏模式进行缩放

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

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

代码： http://jsfiddle.net/rCLxG/

结果： http://fiddle.jshell.net/rCLxG/show/light/

提前致谢！

【问题讨论】：

标签： javascript html google-chrome fullscreen

【解决方案1】：

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

当我将#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>

【讨论】：

【解决方案2】：

通过使用修复

        document.body.webkitRequestFullScreen();

而不是

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

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

【讨论】：