javascript - Webkit-转换 :Scale doesn't work in HTML5 FullScreen mode (chrome only)

Question

我正在做一个项目，该项目要求页面根据页面缩放所有元素(出于好奇:从 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/

提前致谢!

Answer 1

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

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