У меня есть встроенный iframe в адаптивный WordPress сайт.Iframe - это интерактивный веб-калькулятор, разработанный для просмотра с разрешением 900 пикселей и шириной 670 пикселей. Я пытаюсь использовать медиа-запросы на моем WordPress-сайте, чтобы указать CSS, который изменит размер iframe, а также масштабирует содержимое CSS.
@media screen and (max-width: 600px) {
#calculator {
-ms-zoom: 0.5;
-moz-transform: scale(0.5);
-moz-transform-origin: 0 0;
-o-transform: scale(0.5);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.5);
-webkit-transform-origin: 0 0;
}
}
Мой iframe указан как
<iframe id="calculator" style="float: top;" frameborder="0" width="900" height="670" src="someurl" scrolling="no"></iframe>
В iframe есть текст до и после него.Сайт WordPress сокращает размер iframe до 50%, но на мобильных телефонах мы видим полную ширину и высоту указанного iframe (900 и 670 пикселей соответственно).Т.е. текст WordPress может занимать только 40-50% ширины, тогда как правая половина экрана является пробелом.Я пытался добавить
width: 450px;
height: 335px;
в css медиа-запроса для калькулятора, но это вызывает другие проблемы.Калькулятор построен так, чтобы реагировать, но я этого не хочу.Изменение размера iframe, как указано, заставляет элементы калькулятора перемещаться и соотношение сторон всего калькулятора.
Я хочу, чтобы он выглядел так, как если бы калькулятор составлял 900 на 670 пикселей, только уменьшенный на50%.Каков наилучший способ заставить html в iframe думать, что он отображается на экране шириной более 900 пикселей, но на самом деле отображается на 50% размера на экране мобильного телефона?