Il problema è che quando devi usare IFrame per inserire contenuti in un sito web, nel moderno mondo web ci si aspetta che anche l'IFrame sia reattivo. In teoria è semplice, semplicemente un aiuto<iframe width="100%"></iframe> o impostare l'ampiezza CSS su come iframe { width: 100%; }in pratica non è poi così semplice, ma può esserlo.
Se la iframe contenuto è completamente reattivo e può ridimensionarsi senza barre di scorrimento interne, iOS Safari ridimensionerà iframesenza problemi reali.
Se si considera il seguente codice:
<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 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>Quindi funziona senza problemi in iOS 7.1 Safari. Puoi cambiare tra paesaggio e ritratto senza problemi.
Tuttavia, semplicemente modificando il CSS Content.html aggiungendo questo:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Ottieni questo:
Come si può vedere, anche se il content.html contenuto è pienamente rispondente ( div # ScrolledArea ha overflow: scrollset) e l'iframe larghezza è 100% l'iframe prende ancora l'intera larghezza del div # ScrolledArea come se l'overflow non esistesse. dimostrazione
In casi come questo, il iframecontenuto ha aree di scorrimento su di esso, la domanda diventa, come ottenere il iframereattivo, quando il contenuto di iframe ha aree di scorrimento orizzontale? Il problema qui non è nel fatto che Content.html non risponde, ma nel fatto che iOS Safari ridimensiona semplicemente l'iframe in modo che div#ScrolledAreasia completamente visibile.
white-space: nowrapil problema non è di per sé. Lo sto semplicemente usando per ottenere una larghezza estrema div#ScrolledArea. Il problema si presenta quando il contenuto di IFrame contiene aree scorrevoli orizzontalmente al suo interno. In tal caso, iOS Safari ignora semplicemente le impostazioni di larghezza e mostra il contenuto della buca e interrompe la reattività del sito.
white-space: nowrapstile?