Проблема заключается в том, что когда вы должны использовать IFrames для вставки контента на веб-сайт, то в современном веб-мире ожидается, что IFrame также будет реагировать. Теоретически это просто, просто используйте a <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. Вы можете менять ландшафт и портрет без каких-либо проблем.
Однако просто изменив CSS Content.html, добавив следующее:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
Вы получаете следующее:
Как вы можете видеть, хотя контент Content.html полностью реагирует (у div # ScrolledArea есть overflow: scroll set), а ширина iframe равна 100%, iframe по-прежнему принимает полную ширину div # ScrolledArea, как если бы переполнение даже не существует. Демо
В таких случаях, если содержание iframe содержало прокрутки на нем, возникает вопрос, как получить ответ iframe, когда содержимое iframe имеет горизонтальные области прокрутки? Проблема здесь заключается не в том, что Content.html не реагирует, а в том, что iOS Safari просто изменяет размер iframe, так что div#ScrolledArea будет полностью видимым.
