O problema é que, quando você precisa usar IFrames para inserir conteúdo em um site, no mundo da web moderno espera-se que o IFrame também responda. Em teoria, é simples, basta usar <iframe width="100%"></iframe>ou definir a largura do CSS para, iframe { width: 100%; }no entanto, na prática, não é tão simples assim, mas pode ser.
Se o iframeconteúdo for totalmente responsivo e puder se redimensionar sem barras de rolagem internas, o iOS Safari será redimensionado iframesem problemas reais.
Se você considerar o seguinte código:
<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>
Com o 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>
Então isso funciona sem problemas no iOS 7.1 Safari. Você pode alternar entre paisagem e retrato sem problemas.
No entanto, basta alterar o CSS Content.html adicionando este:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
Você obtém isto:
Como você pode ver, embora o content.html conteúdo é totalmente sensível ( div # ScrolledArea tem overflow: scrollset) eo iframe width é de 100% do iframe ainda leva a toda a largura da div # ScrolledArea como se o transbordamento nem sequer existe. Demo
Em casos como esse, onde o iframeconteúdo possui áreas de rolagem, a questão é: como obter a iframeresposta, quando o conteúdo do iframe possui áreas de rolagem horizontal? O problema aqui não está no fato de o Content.html não ser responsivo, mas no fato de o Safari do iOS simplesmente redimensionar o iframe para que div#ScrolledAreaele fique totalmente visível.
white-space: nowrapem si não é o problema. Estou simplesmente usando-o para obter uma largura extrema para div#ScrolledArea. O problema ocorre quando o conteúdo do IFrame possui áreas de rolagem horizontal. Se for esse o caso, o Safari do iOS simplesmente ignora as configurações de largura e mostra o conteúdo do furo e interrompe a capacidade de resposta do site.
white-space: nowrapestilo?