问题在于,当您必须使用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外部的div上的完美工作,但是一旦它被加载到iFrame中,position:fixed就不再起作用了.
这是一个已知问题(我无法找到关于该主题的任何内容)或者我错过了一个重要的CSS或元视口信息？有办法解决这个问题吗？
谢谢!
我正在寻找正确的方法来确保在ipad/iOS5上的iframe中滚动后动态显示的内容是可见的.
哦,Iframes和iPad - 你是多么美妙的老chesnut.我知道:
<iframe height="100%"> 因此它是无用的,因为它的大小不是容器的大小我需要将我的iframe包装在一个div中 - 一个la
<div id="wrapper" style="-webkit-overflow-scrolling:touch;overflow:auto;">
<iframe width="100%" height="100%" src="about"blank"></iframe>
</div>
我的问题是,iframe主体内部动态显示的内容(例如jquery选项卡,手风琴等)可能会导致浏览器在页面的显示范围内裁剪内容.
例如,如果我的"标签"大部分位于iframe内部的可见视口下方,我执行双指滚动(或实现单指scrollTop hack),然后将该内容滚动到视图中,其中一些内容是之前没有绘制的仍然未提取.再次单击第二个选项卡/后退会使内容显示为好像页面不绘制屏幕外内容.在此之后,如果我然后向上滚动到页面顶部,则不会为页面的开头绘制内容(之前可见).使用双指滚动向上和向下滚动页面可以解决问题.
我读过这篇文章,说明问题已得到解决.但它似乎没有完全修复; 并且仍然没有解决这个问题,因为你必须将你的iframe包装在div中并在该div上放置滚动条,桌面浏览器可能会显示双滚动条,具体取决于它们的解释方式overflow:auto.
ps我在iframe内外使用HTML5样板页面,并使用正确的元视口设置.
这是问题,我有并且需要iframe网页.这个iframe必须具有一定的宽度/高度.这在iOS中不起作用,因为可爱的iOS决定忽略帧的高度属性并强制显示所有内容(混蛋!).
你如何让它成为一个普通的iframe？