设备主体内容无法缩放以匹配视口的宽度答案

【问题标题】：Device body content doesn't scale to match width of viewport设备主体内容无法缩放以匹配视口的宽度
【发布时间】：2018-06-11 00:38:19
【问题描述】：

我的目标是让网页缩放，以使 IFrame（这是它包含的唯一内容）的宽度始终与设备屏幕的宽度相匹配，而不管对高度的影响。

所以，在this video 中，您可以看到在前半部分，IFrame 的缩放是如何由视口的宽度决定的，但是在某个点之后它停止并且垂直而不是水平缩放。无论比例如何，我都希望它始终水平缩放。

这是我的 index.html：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Ciphercrack</title>
    </head>
    <body style="margin:0;">
        <iframe src="game.html" height="100vh" width="300px" style="border:none;"></iframe>
    </body>
</html>

这个 index.html 没有 CSS。 IFrame 中引用的 game.html 包含硬编码的像素值，因此游戏窗口将始终为 300 x 500 像素。

有什么想法吗？

【问题讨论】：

标签： javascript html css iframe viewport

【解决方案1】：

在您的代码iframe 中，宽度是固定的300px。
事实并非如此。
您可以尝试设置width 100%

<iframe src="game.html" height="100vh" width="100%" style="border:none;"></iframe>

【讨论】：

不幸的是，这不起作用，但我添加了一个解决方案，在下面做了。

【解决方案2】：

我通过添加 JavaScript 和 transform: scale() 属性来实现这一点 - 代码如下：

var realWidth = 300;
adjustSize();

window.addEventListener('resize', adjustSize);

function adjustSize()
{
    var currWidth = window.screen.availWidth;
    if (realWidth > currWidth)
    {
        currWidth = realWidth;
    }
    var scale = currWidth/realWidth;
    document.getElementById('gameframe').style.transform = 'scale(' + scale + ')';
}

'gameframe' 指的是 IFrame。

【讨论】：