Webkit-Transform：缩放在HTML5全屏模式下不起作用（仅限chrome）

Question

我正在开发一个项目，要求页面根据页面扩展所有元素（对于好奇：从XBMC外观生成html）。

缩放在窗口模式下工作

使用Chrome全屏模式进行缩放

缩放不使用HTML5 requestFullScreen（请注意黑色空间）

现在我遇到的问题是，在Chrome中，当你使用全屏链接时，身体不会向上扩展（就像你只是View -> Enter FullScreen那样。它似乎得到了正确的尺寸，但{ {1}}似乎无效

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

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

提前致谢！

Answer 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>

Answer 2

使用

修复

        document.body.webkitRequestFullScreen();

而不是

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

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