Как заставить IFrame быть отзывчивым в iOS Safari?
Проблема в том, что когда вам нужно использовать IFrames для вставки контента на веб-сайт, то в современном веб-мире ожидается, что IFrame также будет отзывчивым. В теории это просто, просто использование aider<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 по-прежнему занимает всю ширинуDIV # ScrolledArea как будто переполнение даже не существует.демонстрация
В таких случаях былиiframeсодержание имеет области прокрутки, возникает вопрос, как получитьiframe отзывчиво, когда контент iframe имеет горизонтально прокручивающиеся области? Проблема здесь не в том, чтоcontent.html не отзывчив, но тот факт, что iOS Safari просто изменяет размер iframe, чтобыdiv#ScrolledArea будет полностью виден.