Das Problem ist, dass in der modernen Web-Welt erwartet wird, dass der IFrame auch reagiert, wenn Sie IFrames zum Einfügen von Inhalten in eine Website verwenden müssen. Theoretisch ist es einfach, einfach zu verwenden <iframe width="100%"></iframe>oder die CSS-Breite so einzustellen, iframe { width: 100%; }aber in der Praxis ist es nicht ganz so einfach, aber es kann sein.
Wenn der iframeInhalt vollständig reagiert und die Größe ohne interne Bildlaufleisten ändern kann, ändert iOS Safari die Größe iframeohne echte Probleme.
Wenn Sie den folgenden Code berücksichtigen:
<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>Mit der 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>Dann funktioniert dies ohne Probleme in iOS 7.1 Safari. Sie können problemlos zwischen Quer- und Hochformat wechseln.
Ändern Sie jedoch einfach das CSS Content.html, indem Sie Folgendes hinzufügen:
#ScrolledArea {
width: 100%;
overflow: scroll;
white-space: nowrap;
background: #ff0000;
}Du bekommst das:
Wie Sie sehen können, nimmt der Iframe die volle Breite der div # ScrolledArea an , obwohl der Content.html- Inhalt vollständig reagiert ( div # ScrolledArea wurde overflow: scrollfestgelegt) und die iframe-Breite 100% beträgt, als ob der Überlauf nicht einmal vorhanden wäre. Demo
Wenn in solchen Fällen der iframeInhalt Bildlaufbereiche enthält, stellt sich die Frage, wie die iframeReaktion erfolgen kann, wenn der Iframe-Inhalt horizontal Bildlaufbereiche aufweist. Das Problem liegt hier nicht in der Tatsache, dass die Content.html nicht reagiert , sondern in der Tatsache, dass die iOS-Safari die Größe des Iframes einfach so ändert, dass der div#ScrolledAreavollständig sichtbar ist.
white-space: nowrapan sich ist nicht das Problem. Ich benutze es einfach, um eine extreme Breite zu bekommen div#ScrolledArea. Das Problem tritt auf, wenn der IFrame-Inhalt horizontal scrollbare Bereiche enthält. In diesem Fall ignoriert die iOS-Safari einfach Ihre Breiteneinstellungen und zeigt den Lochinhalt an und beeinträchtigt die Reaktionsfähigkeit der Website.
white-space: nowrapStil enthält?