Можно ли загрузить отзывчивый iframe на невосприимчивый сайт?

Прежде чем вы отметите это как дублируемое, позвольте мне сказать вам, что речь идет не о том, чтобы сделать iframe rescalable, и я не ожидаю таких ответов: Создание iframe отзывчивого

Моя проблема легко объяснить: я получил сайт без тэга meta и ширину (скажем) 1000px. Поэтому, когда вы загружаете его в мобильное устройство, он масштабируется в соответствии с шириной 360 пикселей, а все очень мало.

Теперь я прекрасно знаю, как сделать iframe для настройки любой ширины, но проблема в том, что загружаемый сайт также будет отображаться с шириной 1000 пикселей, даже если у этого есть тэг meta viewport. Конечно, все в этом iframe показано очень маленьким.

Теперь вопрос: могу ли я сделать содержимое этого iframe отображаемым на полной ширине, но подчиняться не ширине исходного документа, а ширине устройства. (очевидно, мне не нужен небольшой 360px iframe).

Это может помочь вам понять:

EDIT: многие люди, похоже, не понимают этого, поэтому еще один способ объяснить это:

Выберите любой сайт, на котором нет тега просмотра
Нарисуйте на нем фиксированный фрейм
И попробуйте сделать iframe похожим, если он был открыт на новой вкладке (по умолчанию окно просмотра iframe будет равно 1000px, я бы хотел, чтобы он был размером в телепортале)

Ответ 1

Когда я впервые прочитал ваш вопрос, я сказал "нет", это невозможно, но потом я начал думать, и я считаю, что нашел способ. Он требует Javascript.

Сначала нам нужно получить два значения: ширину документа и ширину экрана устройства. В соответствии с вашим примером 1000px и 360px соответственно.

Мы можем получить ширину документа (1000 пикселей) с помощью document.documentElement.clientWidth и ширину экрана (360 пикселей) с помощью window.screen.availWidth

var dw = document.documentElement.clientWidth;
var sw = window.screen.availWidth;

Как только мы получим эти два значения, мы можем получить scale окна просмотра

var scale = dw/sw;

И последнее мы устанавливаем ширину iframe на ширину экрана (360 пикселей), чтобы затем масштабировать ее до ранее вычисленного scale. Для этого мы используем преобразования CSS.

var iframe = document.getElementById('theIframe');
iframe.style.width = dw + 'px';
iframe.style.transform = 'scale(' + scale + ')';

Вам все равно нужно центрировать iframe так, чтобы он показывался в нужном месте. Вы можете использовать iframe.style.transformOrigin = '0 0' для этого или любого другого метода, например translate(w/2, h/2) или top:w/2; height:h/2 (псевдокод).

Кроме того, вам может понадобиться использовать префиксы браузера для некоторых устройств, т.е. style.webkitTransform вместо style.transform.

Чтобы вычислить высоту вашего iframe, вы могли бы сделать

var dh = document.documentElement.clientHeight;
iframe.style.height = (0.5 * dh / scale) + 'px'; // percentage based
// or...
iframe.style.height = (600 / scale) + 'px'; // pixel based

Предположим, вы хотите использовать 50% или 600 пикселей для высоты.

Дайте мне знать, если вам нужно, чтобы я уточнил больше и удачи!

Ответ 2

Если я правильно понял, что вы спрашиваете, да, это возможно, но поскольку я не могу воспроизвести ситуацию в скрипке, вот ниже кода, который я испытал с успехом:

Невосприимчивый сайт (не связанный meta `viewport`)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>The non-responsive site</title>
<style type="text/css">
body {
    margin:0;
    padding:0;
}
#wrapper {
    width:1000px;
    margin:0 auto;
}
iframe {
    max-width:1000px;
    width:100%;
    margin:10px auto;
    display:block;
    min-height:400px;
    border:0 
}
</style>
</head>   
<body>
    <div id="wrapper">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vitae orci a velit pretium commodo. Vivamus ultrices auctor lectus, non semper ipsum dictum eu. Integer nulla arcu, bibendum ac hendrerit at, scelerisque in augue. Proin a nisi et purus pulvinar blandit. Nulla ac diam congue, malesuada nunc vitae, aliquam quam. Praesent volutpat turpis eu orci volutpat iaculis. Vivamus tempus varius sagittis. Sed sollicitudin, dui ac finibus placerat, ante metus volutpat dui, eu feugiat ipsum erat nec libero. Quisque eu viverra ex, sit amet congue orci. Cras porta dignissim diam, in eleifend urna vulputate sit amet. Mauris in malesuada ligula, eget facilisis nisl. Maecenas non enim orci. Nullam porttitor fringilla velit a sodales. Suspendisse et accumsan mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. 
    </div>
    <iframe src="responsive-iframe.html"></iframe>
</body>
</html>

Ответный-iframe (meta `viewport` связанный)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
body {
    margin:0;
    padding:0;
}

p {
    color:red;
    font-size:32px;
    background-color:#FEB1C7
}
@media (max-width: 480px) {
    p {
        color:green;
        font-size:48px;
        background-color:#CF0
    }
}
</style>
</head> 
<body>
    <p>I'm green below 480px width, otherwise I'm red</p>
</body>
</html>

ПРИМЕЧАНИЕ: CSS выше в теге <head> был просто быстрым способом сделать это демо, я всегда рекомендую использовать внешние файлы CSS.

UPDATE: (я обновил код, чтобы он соответствовал SS ниже)

ScreenShot для сайта НЕЗАВИСИМЫЙ

ScreenShot для сайта iframe-responseive

Ответ 3

Вы можете сделать это, если сможете изменить iframe css для использования минимальных устройств шириной медиа-запросов и типографика размером в видовом формате. Это должно сделать его отзывчивым с помощью устройства, а типографика размером в видовом режиме будет корректировать вещи в соответствии с процентом ширины устройства, а не использовать текст "Браузер с масштабированием".

Ниже приведен пример CSS:

@media only screen and (min-device-width:25em) {
  body {font-size:3vw; line-height:3.9vw;}
}

Ответ 4

То, что вы на самом деле ищете, - это iframe внутри iframe. Основной html не будет называть цель напрямую, а использовать:

<iframe id="myviewport" src="myviewport.html" seamless />

Файл myviewport.html будет, например:

<html>
<head>
    <meta name="viewport" content="width=1000, initial-scale=1">
</head>
<body>
    <iframe src="http://target.example.com">
</body>
</html>

У вас есть myviewport.html, поэтому вы можете решить, какие манипуляции выполняться на нем - в примере я показал предварительно установленную ширину содержимого, но вы можете манипулировать им в соответствии с устройством, целевой страницей и т.д., без компрометации автомасштабирование родительского документа.

Ответ 5

Пример CSS/HTML ниже:

* {
  margin: 0;
  padding: 0
}
.myIframe {
  position: relative;
  padding-bottom: 65.25%;
  padding-top: 30px;
  height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch; //<<--- THIS IS THE KEY 
  border: solid black 1px;
}
.myIframe iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

<div>Some text here</div>
<div class='myIframe'>
  <iframe></iframe>
</div>