Device body content doesn't scale to match width of viewport
Question
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.
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. I would like it to always scale horizontally, regardless of the ratio.
Here is my 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. The game.html referenced in the IFrame contains hardcoded pixel values so that the game window will always be 300 by 500 pixels.
Any ideas?
2 answers
solution1
0 2018-06-10 05:16:01
In your code iframe width is fixed 300px .
Fact this not scalling.
You can try with set width 100%
<iframe src="game.html" height="100vh" width="100%" style="border:none;"></iframe>
solution2
0 2018-06-10 16:38:19
I got this working by adding JavaScript and the transform: scale() property - code is below:
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.