Sorun şu ki, bir web sitesine içerik eklemek için IFrame'leri kullanmanız gerektiğinde, modern web dünyasında IFrame'in de duyarlı olması bekleniyor. Teoride basit, basitçe <iframe width="100%"></iframe>CSS genişliğini kullanmaya yardımcı olun veya ayarlayın, iframe { width: 100%; }ancak pratikte o kadar basit değil, ancak olabilir.
Eğer iframeiçerik tamamen duyarlı ve iç kaydırma çubukları olmadan kendini yeniden boyutlandırmak, sonra iOS Safari boyutlandırmak olacak iframeherhangi bir gerçek sorunlar olmadan.
Aşağıdaki kodu dikkate alırsanız:
<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>İ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>Daha sonra bu, iOS 7.1 Safari'de sorunsuz çalışır. Manzara ve portre arasında herhangi bir sorun yaşamadan geçiş yapabilirsiniz.
Ancak, bunu ekleyerek Content.html CSS'yi değiştirerek :
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Bunu aldın:
Gördüğünüz gibi, Content.html içerik tamamen duyarlı ( ScrolledArea div # sahiptir overflow: scrollseti) ve% 100 iframe hala tam genişliği sürer genişliği iframe div # ScrolledArea taşma bile yok sanki. gösteri
Bu gibi durumlarda, iframeiçeriğin üzerinde kaydırma alanları varsa, soru şu olur:iframe , iframe içeriğinde yatay kaydırma alanları varken duyarlı ? Buradaki sorun, Content.html'nin yanıt vermemesi değil, iOS Safari'nin iframe'i div#ScrolledAreatamamen görünür olacak şekilde yeniden boyutlandırmasıdır .
white-space: nowrapsorun kendi içinde değil. Sadece aşırı bir genişlik elde etmek için kullanıyorum div#ScrolledArea. Sorun, IFrame içeriğinde yatay olarak kaydırılabilir alanlar olduğunda ortaya çıkar. Bu durumda, iOS Safari genişlik ayarlarınızı yok sayar ve delik içeriğini ve sitenin yanıt verme hızını bozar.
white-space: nowrapstil içeriği varsa, iOS'un bir iFrame'i içindeki sayfanın tam genişliğine genişleteceğini mi söylüyorsunuz ?