Le problème est que lorsque vous devez utiliser IFrames pour insérer du contenu dans un site Web, alors dans le monde Web moderne, on s'attend à ce que l'IFrame soit également réactif. En théorie, c'est simple, aidez simplement à utiliser <iframe width="100%"></iframe>ou à définir la largeur CSS, iframe { width: 100%; }mais en pratique, ce n'est pas aussi simple, mais cela peut l'être.
Si le iframecontenu est entièrement réactif et peut se redimensionner sans barres de défilement internes, iOS Safari redimensionnera le iframesans aucun problème réel.
Si vous considérez le code suivant:
<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>Avec le 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>Ensuite, cela fonctionne sans problème dans iOS 7.1 Safari. Vous pouvez passer du paysage au portrait sans aucun problème.
Cependant, en changeant simplement le CSS Content.html en ajoutant ceci:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Vous obtenez ceci:
Comme vous pouvez le voir, même si le contenu Content.html est entièrement réactif ( div # ScrolledArea a été overflow: scrolldéfini) et que la largeur de l'iframe est de 100%, l'iframe prend toujours toute la largeur du div # ScrolledArea comme si le débordement n'existait même pas. Démo
Dans des cas comme celui-ci, si le iframecontenu comporte des zones de défilement, la question devient: comment obtenir le iframeréactif, lorsque le contenu iframe a des zones de défilement horizontal? Le problème ici ne réside pas dans le fait que Content.html n'est pas réactif, mais dans le fait que iOS Safari redimensionne simplement l'iframe pour que le div#ScrolledAreasoit entièrement visible.
white-space: nowraple problème n'est pas en soi. Je l'utilise simplement pour obtenir une largeur extrême div#ScrolledArea. Le problème survient lorsque le contenu IFrame contient des zones de défilement horizontal. Si tel est le cas, iOS Safari ignore simplement vos paramètres de largeur et affiche le contenu du trou et brise la réactivité du site.
white-space: nowrapstyle?