Question

我的目标是对网页进行缩放，使得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像素。

有什么想法吗？

Answer 1

在您的代码iframe中，宽度已固定300px。
事实上，这不是scalling 您可以尝试使用set width 100%

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

Answer 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 + ')';
}

＆＃39; gameframe＆＃39;是指IFrame。

设备正文内容不会缩放以匹配视口宽度

2 个答案: