iframe 移动端适配 以及 H5适配iphoneX 底部安全区域留白问题

ios端上下滑动时卡顿、页面缺失

在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。

出现原因分析：
笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。(注：有待考证)

解决办法：
只需要在公共样式加入下面这行代码

But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。
拓展知识：
-webkit-overflow-scrolling:touch是什么？

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

只允许iframe子页面滑动， 禁止父页面滚动条,滑动

html,body 都加上overflow: hidden 就可以禁止父页面滑动。

H5适配iphoneX底部留白问题

1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式
属性值有：contain 视窗包含网页
cover  网页覆盖视窗
auto 默认值，同contain效果
注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。

2、env() 和 constant()

ios新增特性函数，用于设置安全区域与边界的距离，有四个值

• safe-area-inset-left：安全区域距离左边边界距离
• safe-area-inset-right：安全区域距离右边边界距离
• safe-area-inset-top：安全区域距离顶部边界距离
• safe-area-inset-bottom：安全区域距离底部边界距离

底部兼容只需设置bottom边距即可
注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

ios设备 iframe 适应高度

参考

h5 iframe显示不全_大多数人都会遇到的几个H5坑（实战）
H5适配iphoneX底部留白问题
ios设备使用iframe宽度超出屏幕的解决方法