Содержимое тела устройства не масштабируется в соответствии с шириной области просмотра - PullRequest
Новая
       12

Содержимое тела устройства не масштабируется в соответствии с шириной области просмотра

0 голосов
/ 10 июня 2018

Моя цель состоит в том, чтобы веб-страница масштабировалась таким образом, чтобы ширина 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.В файле game.html, указанном в IFrame, содержатся жестко запрограммированные значения пикселей, поэтому окно игры всегда будет иметь размер 300 на 500 пикселей.

Есть идеи?

Ответы [ 2 ]

0 голосов
/ 10 июня 2018

Я получил эту работу, добавив 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.

0 голосов
/ 10 июня 2018

В вашем коде iframe ширина фиксирована 300px.
Факт, что это не пародия.
Вы можете попробовать с набором width 100%

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