时间戳

首页 > 解决方案 > 设备主体内容无法缩放以匹配视口的宽度

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

问题描述

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

所以，在这个视频中，你可以看到 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 像素。

有任何想法吗？

标签： javascripthtmlcssiframeviewport

解决方案

在您的代码iframe宽度是固定的300px。
事实上，这不是吹毛求疵。
您可以尝试使用 setwidth 100%

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

推荐阅读