需求
iframe在手机上展示正好一屏的内容，横向100%，纵向高度固定（例如500px）超出可滚动。
问题
这些问题在Mac上、window上、Android上都是没有的。
- 宽高不受限制
给iframe节点style上设置宽高，加上!important也不会生效。iframe会默认全部平铺展示。 - 宽（高）溢出
最奇葩的在于，iframe页面在iOS手机上打开大概率会出现右侧被截断的现象。如下图所示：
iOS上iframe宽度被截断
- iframe滚动
宽高都不受限制了，当然无法滚动了。 - iframe内页面fixed布局失效
iframe被平铺，fixed布局不准也是理所当然了。
解决方案：
1. 宽（高）溢出 && 滚动问题
这两个问题需要一起说
关于实现滚动
百度一下可以看到很多了
<style>
.scroll-wrapper {
-webkit-overflow-scrolling: touch;
overflow-y: scroll;
/* 提示: 请在此处加上需要设置的大小或位置信息! */
}
.scroll-wrapper iframe {
/* 你自己指定的样式 */
}
</style>
<div class="scroll-wrapper">
<iframe src="" frameborder="0" ></iframe>
</div>
关于宽度溢出
本质是iOS手机内，iframe内页面display:none隐藏掉的元素宽度会依然计算在内（文章最后再给个demo吧）。
解决方案：
(1) 对于子页面不可控的情况下 最简单的解决办法
给iframe加上属性scrolling="no"
页面会自动变得规规矩矩，虽然有scrolling="no" 属性，在电脑上模拟会无法滑动，但是在iOS手机上会全部铺满，Y轴上可以依赖上面提到的父节点的属性进行滚动。
(2) 子页面可控 操作子页面
方法一：html加属性width:100vw; ， 注意给html和body加属性width:100%无效....
方法二：html加属性width: 1px;min-width: 100%;
2. fixed布局问题
子页面不可控的情况下，无解。
可控的情况下，以下面这种布局来写子页面，子页面body下的全部内容全部包裹在#wrap这个dom中。用dom的滚动代替body的滚动。iOS手机下会认为子页面无尺寸。
#wrap {
position: fixed;
top: 0;
right:0;
bottom:0;
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
End. 宽度溢出DEMO
子页面：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.wrapper{
overflow: hidden;
padding: 0 10px;
}
</style>
</head>
<body>
<div class="wrapper">
<div style="background-color:blanchedalmond ;height:100px;width:100%">dom1</div>
<div style="background-color:darkgray; width: 800px; word-break:break-all;">
dom2
</div>
<div style="background-color:darkgoldenrod;height:800px;">
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
<p>dom3</p>
</div>
</div>
</body>
</html>
父页面：
<div style="-webkit-overflow-scrolling: touch;overflow-y: scroll; overflow-x: hidden;height:100vh;width:100vw;">
<iframe class="j_iframe_iframe" src="./test4.html" frameborder="0"></iframe>
</div>
在Mac（Chrome）上和Android上一切正常，使用iphone打开，会发现横向边界被截断了。
如果改为overflow-x: scroll;会发现横向可滑动的距离非常长。通过使用Mac Safari调试iphone可见
$('.j_iframe_iframe')[0].contentDocument.querySelector('html').offsetWidth
// 820 （dom2的宽度 + wrapper的padding）
iframe内页面超出隐藏overflow:hidden元素的宽度也被计算在内了
网友评论