Problem polega na tym, że kiedy musisz używać ramek iFrame do wstawiania treści do strony internetowej, to we współczesnym świecie internetowym oczekuje się, że ramka iFrame również będzie responsywna. W teorii to proste, po prostu użyj pomocy <iframe width="100%"></iframe>lub ustaw szerokość CSS na, iframe { width: 100%; }jednak w praktyce nie jest to takie proste, ale może być.
Jeśli iframezawartość jest w pełni responsywna i może zmieniać swój rozmiar bez wewnętrznych pasków przewijania, iOS Safari zmieni rozmiar iframebez żadnych rzeczywistych problemów.
Jeśli weźmiesz pod uwagę następujący kod:
<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>Z 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>Wtedy działa to bez problemów w iOS 7.1 Safari. Możesz bez problemu przełączać się między orientacją poziomą i pionową.
Jednak po prostu zmieniając Content.html CSS, dodając:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Otrzymujesz to:
Jak widać, mimo że zawartość Content.html jest w pełni responsywna ( div # ScrolledArea maoverflow: scroll ustawione) i iframe szerokość wynosi 100% iframe nadal trwa pełną szerokość div # ScrolledArea jakby przelewowy nawet nie istnieje. Próbny
W takich przypadkach, czy iframetreść ma przewijane obszary, pojawia się pytanie, jak uzyskać iframeresponsywność, kiedy zawartość iframe ma obszary przewijane w poziomie? Problem tutaj nie polega na tym, że Content.html nie jest responsywny, ale na fakcie, że iOS Safari po prostu zmienia rozmiar iframe tak, div#ScrolledAreaaby był w pełni widoczny.
white-space: nowrapsamo w sobie nie jest problemem. Po prostu używam go, aby uzyskać ekstremalną szerokość div#ScrolledArea. Problem pojawia się, gdy zawartość iFrame zawiera obszary przewijalne w poziomie. W takim przypadku iOS Safari po prostu ignoruje ustawienia szerokości i pokazuje zawartość dziury oraz przerywa czas reakcji witryny.
white-space: nowrapstylową treść ?