Question

iframe的HTML5自适应手机

<iframe src="index.html" id="iframepage" name="iframepage" frameBorder=0 scrolling=no width="100%" height="100%" onLoad="iFrameHeight()" ></iframe>

因为是嵌入其他网站的，在原网站用手机打开是自适应高宽的，但是用iframe嵌入以后就不是自适应了，问iframe要怎么能在手机上也自适应大小？

Answer 1

iframe的HTML5自适应手机
首先你要明白css的height的使用规则，当设定 height:100%; 相对高度的时候，height 具有继承性，元素的具体高度相对于它的父元素，也就是它的父元素必须有具体的height属性值，不然本元素设置的height百分比无效，等于没有设置高度。
如果元素的父元素的height属性值也是相对高度，比如是百分百，那么，父元素的父元素也必须有height设定，这种关系一直到最顶层的父元素。

Answer 2

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">这段代码是手机端必带的，iframe设置宽100vw，高100vh就OK了。

Answer 3

1. 首先你要明白css的height的使用规则，当设定   height:100%;  相对高度的时候，height 具有继承性，元素的具体高度相对于它的父元素，也就是它的父元素必须有具体的height属性值，不然本元素设置的height百分比无效，等于没有设置高度。

2. 如果元素的父元素的height属性值也是相对高度，比如是百分百，那么，父元素的父元素也必须有height设定，这种关系一直到最顶层的父元素。
   

Answer 4

加一个 border="0"
确保iframe 的上一级元素，够宽