3

我正在开发一个项目，该项目需要页面根据页面放大所有元素（对于好奇：从 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/

提前致谢！

4

2 回答 2

2

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

这不起作用，当我制作#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>
于 2021-06-06T10:22:43.290 回答
1

通过使用修复

        document.body.webkitRequestFullScreen();

代替

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

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

于 2012-06-04T13:26:21.287 回答