Проблема полягає в тому, що коли вам доводиться використовувати IFrames для вставки вмісту на веб-сайт, тоді в сучасному веб-світі очікується, що 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. Ви можете змінювати між пейзажем та портретом без жодних проблем.
Однак просто змінивши CSS Content.html , додавши це:
#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 не реагує, а в тому, що Safari для iOS просто змінює розмір iframe, щоб div#ScrolledAreaвін був повністю видимий.
white-space: nowrapпо собі це не проблема. Я просто використовую його для отримання надзвичайної ширини div#ScrolledArea. Проблема виникає, коли вміст IFrame має в ньому горизонтально прокручувані ділянки. У такому випадку iOS Safari просто ігнорує ваші налаштування ширини і показує вміст отворів і порушує чутливість сайту.
white-space: nowrapстилем?