Проблема с попыткой показать iframe масштабируемого веб-сайта.Php

Кемеровские программисты php общаются здесь
Ответить Пред. темаСлед. тема
Anonymous
 Проблема с попыткой показать iframe масштабируемого веб-сайта.

Сообщение Anonymous »

Я пытаюсь создать веб-сайт, на котором будет отображаться iframe, сбоку от которого есть панель. Главное, что мне нужно, это чтобы iframe отображал веб-сайт так, как если бы он был на мониторе с разрешением 1920 пикселей, независимо от разрешения, используемого средством просмотра веб-сайта. Я прикрепил несколько изображений-макетов, чтобы попытаться объяснить это. Как вы можете видеть, когда пользователь перетаскивает окно, сайт iframe сжимается, но сохраняет те же пропорции по ширине и масштабируется, поэтому вы можете видеть большую часть сайта. внизу. Таким образом, если бы пользователь использовал разрешение 1368x768, как вы можете видеть в другом макете, он все равно увидел бы, как веб-сайт будет отображаться при разрешении 1920 пикселей.
Прошу прощения, если это сбивает с толку, я был пытаюсь последние 2 дня, но мне так и не удается заставить его постоянно заполнять контейнер, в котором находится iframe, всегда есть пробелы, или он не масштабируется, или возвращается к версиям для планшетов/мобильных устройств, все чего я пытаюсь избежать.
Есть ли у кого-нибудь какой-нибудь совет для меня, любые подсказки, которые я могу попробовать, очень ценю любую помощь.
Как оно должно выглядеть на мониторе 1920x1080
Как оно должно выглядеть на мониторе 1920x1080, если его уменьшить
Как оно должно выглядеть на 1368x768 разрешение
Что касается кода, я пробовал очень много вещей, наиболее «успешным» является использование js, это то, что я сделал, но это не сработало так, как мне хотелось.
function adjustIframeScale() {
if (iframe && container) {
const containerWidth = container.getBoundingClientRect().width;
const scale = (containerWidth * 2) / 1920;

iframe.style.transform = `scale(${scale})`;
iframe.style.transformOrigin = '0 0';

container.style.height = `${1080 * scale}px`;

// Log values for debugging
console.log('Scale values:', {
containerWidth,
scale,
scaledHeight: 1080 * scale
});
}


Подробнее здесь: https://stackoverflow.com/questions/791 ... hat-scales
Реклама
Ответить Пред. темаСлед. тема

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

  • Похожие темы
    Ответы
    Просмотры
    Последнее сообщение

Вернуться в «Php»