El problema es que cuando tiene que usar IFrames para insertar contenido en un sitio web, entonces en el mundo web moderno se espera que el IFrame también responda. En teoría es simple, simplemente use <iframe width="100%"></iframe>o configure el ancho de CSS eniframe { width: 100%; } sin embargo, en la práctica no es tan simple, pero puede serlo.
Si el iframecontenido responde completamente y puede cambiar su tamaño sin barras de desplazamiento internas, iOS Safari cambiará el tamaño deliframe sin problemas reales.
Si considera el siguiente 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>
Con el 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>Entonces esto funciona sin problemas en iOS 7.1 Safari. Puede cambiar entre paisaje y retrato sin ningún problema.
Sin embargo, simplemente cambiando Content.html CSS agregando esto:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Obtienes esto:
Como puede ver, aunque el contenido Content.html es totalmente receptivo ( div # ScrolledArea se ha overflow: scrollestablecido) y el ancho del iframe es del 100%, el iframe todavía toma el ancho completo del div # ScrolledArea como si el desbordamiento no existiera.Manifestación
En casos como este, si el iframecontenido tiene áreas de desplazamiento, la pregunta es cómo iframeresponder, cuando el contenido del iframe tiene áreas de desplazamiento horizontal. El problema aquí no está en el hecho de que Content.html no responde, sino en el hecho de que iOS Safari simplemente cambia el tamaño del iframe para que div#ScrolledAreasea completamente visible.
white-space: nowrapen sí mismo no es el problema. Simplemente lo estoy usando para obtener un ancho extremo div#ScrolledArea. El problema surge cuando el contenido de IFrame tiene áreas desplazables horizontalmente. Si ese es el caso, iOS Safari simplemente ignora la configuración de ancho y muestra el contenido del agujero y rompe la capacidad de respuesta del sitio.
white-space: nowrapestilo?