Проблема в том, что когда вам нужно использовать IFrame для вставки контента на веб-сайт, то в современном веб-мире ожидается, что IFrame также будет отзывчивым. Теоретически это просто, просто помощник использует <iframe width="100%"></iframe>или устанавливает ширину CSS, iframe { width: 100%; }однако на практике это не так просто, но может быть.
Если iframeсодержимое полностью адаптивно и может изменять свой размер без внутренних полос прокрутки, то iOS Safari изменит размер iframeбез каких-либо реальных проблем.
Если вы рассмотрите следующий код:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test</title>
<style type="text/css" rel="stylesheet">
#Main {
padding: 10px;
}
</style>
</head>
<body>
<h1>Iframe Isolation Test 13.17</h1>
<div id="Main">
<iframe height="950" width="100%" src="Content.html"></iframe>
</div>
</body>
</html>С Content.html :
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=9,10,11" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Iframe Isolation Test - Content</title>
<style type="text/css" rel="stylesheet">
#Main {
width: 100%;
background: #ccc;
}
</style>
</head>
<body>
<div id="Main">
<div id="ScrolledArea">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc malesuada purus quis commodo convallis. Fusce consectetur mauris eget purus tristique blandit. Nam nec volutpat augue. Aliquam sit amet augue vitae orci fermentum tempor sit amet gravida augue. Pellentesque convallis velit eu malesuada malesuada. Aliquam erat volutpat. Nam sollicitudin nulla nec neque viverra, non suscipit purus tincidunt. Aenean blandit nisi felis, sit amet ornare mi vestibulum ac. Praesent ultrices varius arcu quis fringilla. In vitae dui consequat, rutrum sapien ut, aliquam metus. Proin sit amet porta velit, suscipit dignissim arcu. Cras bibendum tellus eu facilisis sodales. Vestibulum posuere, magna ut iaculis consequat, tortor erat vulputate diam, ut pharetra sapien massa ut magna. Donec massa purus, pharetra sed pellentesque nec, posuere ut velit. Nam venenatis feugiat odio quis tristique.
</div>
</div>
</body>
</html>Тогда это работает без проблем в iOS 7.1 Safari. Вы можете без проблем переключаться между альбомной и портретной ориентацией.
Однако, просто изменив Content.html CSS, добавив это:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Вы получаете это:
Как вы можете видеть, даже несмотря на то, content.html содержимого полностью реагирует ( Div # ScrolledArea имеет overflow: scrollмножество) и IFRAME ширина 100% , то IFrame все еще занимает всю ширину сНа # ScrolledArea как будто переполнение даже не существует. демонстрация
В таких случаях, когда у iframeконтента есть области прокрутки, возникает вопрос, как получить iframeотзывчивость, когда у содержимого iframe есть области горизонтальной прокрутки? Проблема здесь не в том, что Content.html не реагирует, а в том, что iOS Safari просто изменяет размер iframe, чтобы div#ScrolledAreaон был полностью виден.
white-space: nowrapпроблема не в этом. Я просто использую его, чтобы получить максимальную ширину div#ScrolledArea. Проблема возникает, когда в содержимом IFrame есть области с горизонтальной прокруткой. Если это так, iOS Safari просто игнорирует ваши настройки ширины и показывает содержимое дыр и нарушает отзывчивость сайта.
white-space: nowrapстилем?