设备主体内容无法缩放以匹配视口宽度
[英]Device body content doesn't scale to match width of viewport
问题描述
My goal is for the webpage to scale such that the width of the IFrame (which is the only content it contains) will always match the width of the device screen, regardless of the effect on height. 
我的目标是对网页进行缩放，以使IFrame的宽度（这是它包含的唯一内容）的宽度始终匹配设备屏幕的宽度，而不考虑高度的影响。
So, in this video , you can see how in the first half the scaling of the IFrame is determined by the width of the viewport, but after a point this stops and it scales vertically rather than horizontally. 因此，在此视频中 ，您可以看到在上半部分如何通过视口的宽度确定IFrame的缩放比例，但是在此之后，该点将停止，并且将垂直缩放而不是水平缩放。 I would like it to always scale horizontally, regardless of the ratio. 我希望它总是水平缩放，而不管比例如何。
Here is my index.html: 这是我的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>
There is no CSS for this index.html. 此index.html没有CSS。 The game.html referenced in the IFrame contains hardcoded pixel values so that the game window will always be 300 by 500 pixels. IFrame中引用的game.html包含硬编码的像素值，因此游戏窗口将始终为300 x 500像素。
Any ideas? 有任何想法吗？
2 个解决方案
解决方案1
0 2018-06-10 05:16:01
In your code iframe width is fixed 300px . 在您的代码中， iframe宽度固定为300px 。
Fact this not scalling. 事实并非如此。
You can try with set width 100% 您可以尝试将width 100%设置width 100%
<iframe src="game.html" height="100vh" width="100%" style="border:none;"></iframe>
解决方案2
0 2018-06-10 16:38:19
I got this working by adding JavaScript and the transform: scale() property - code is below: 我通过添加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' refers to the IFrame. “游戏框架”是指IFrame。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.