Masalahnya adalah ketika Anda harus menggunakan IFrames untuk memasukkan konten ke situs web, maka di dunia web modern diharapkan bahwa IFrame juga akan responsif. Secara teori itu sederhana, hanya orang lain yang menggunakan <iframe width="100%"></iframe>
atau mengatur lebar CSS untuk iframe { width: 100%; }
namun dalam prakteknya tidak sesederhana itu, tetapi bisa jadi.
Jika iframe
konten sepenuhnya responsif dan dapat mengubah ukurannya sendiri tanpa bilah gulir internal, maka iOS Safari akan mengubah ukurannya iframe
tanpa masalah nyata.
Jika Anda mempertimbangkan kode berikut:
<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>
Dengan 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>
Maka ini berfungsi tanpa masalah di iOS 7.1 Safari. Anda dapat mengubah antara lanskap dan potret tanpa masalah.
Namun dengan hanya mengubah Content.html CSS dengan menambahkan ini:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}
Anda mendapatkan ini:
Seperti yang Anda lihat, meskipun konten Content.html sepenuhnya responsif ( div # ScrolledArea telah overflow: scroll
ditetapkan) dan lebar iframe adalah 100% iframe masih mengambil lebar penuh dari div # ScrolledArea seolah-olah tidak ada luapan yang melimpah. Demo
Dalam kasus seperti ini, apakah iframe
konten memiliki area gulir di atasnya, pertanyaannya menjadi, bagaimana mendapatkan iframe
responsif, ketika konten iframe memiliki area gulir secara horizontal? Masalahnya di sini bukan pada kenyataan bahwa Content.html tidak responsif, tetapi pada kenyataan bahwa Safari iOS hanya mengubah ukuran iframe sehingga div#ScrolledArea
akan sepenuhnya terlihat.
white-space: nowrap
itu sendiri bukanlah masalahnya. Saya hanya menggunakannya untuk mendapatkan lebar ekstrim div#ScrolledArea
. Masalahnya muncul ketika konten IFrame memiliki area yang dapat digulir secara horizontal di dalamnya. Jika itu yang terjadi, iOS Safari mengabaikan pengaturan lebar Anda dan menunjukkan konten lubang dan memecah respons situs.
white-space: nowrap
gaya?