问题在于,当您必须使用IFrame将内容插入网站时,那么在现代网络世界中,预计IFrame也会响应.从理论上讲它很简单,只需要使用<iframe width="100%"></iframe>或设置CSS宽度,iframe { width: 100%; }但在实践中它并不是那么简单,但它可以.
如果iframe内容完全响应并且可以在没有内部滚动条的情况下自行调整大小,那么iOS Safari将调整大小而iframe没有任何实际问题.
如果您考虑以下代码:
<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>
使用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: …有一个iframe,它基本上有更多的内容而不适合框架.框架的大小基于浏览器屏幕大小,并允许溢出滚动,在除iOS之外的所有浏览器上都能完美运行.在iOS上,safari决定调整框架大小以适应内容.不是你所期望的.
关于jsFiddle的示例代码:http:
//jsfiddle.net/R3PKB/2/
在您的iOS设备上试用:http:
//jsfiddle.net/R3PKB/2/embedded/result
HTML:
<div class="frame_holder">
<iframe class="my_frame">
// The content
</iframe>
</div>
CSS:
body {
position: relative;
background: #f0f0f0;
}
.frame_holder {
position: absolute;
top: 50px;
bottom: 50px;
left: 50px;
right: 50px;
background: #ffffff;
}
.my_frame {
width: 100%;
height: 100%;
border: 1px solid #e0e0e0;
}