ios端上下滑动时卡顿、页面缺失
在ios端，上下滑动页面时，如果页面高度超出了一屏，就会出现明显的卡顿，页面有部分内容显示不全的情况。
出现原因分析：
笼统说微信浏览器的内核，Android上面是使用自带的WebKit内核，iOS里面由于苹果的原因，使用了自带的Safari内核，Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页，会创建一个UIScrollView，提供子layer给渲染模块使用。(注：有待考证)
解决办法：
只需要在公共样式加入下面这行代码
|
1 |
*{ -webkit-overflow-scrolling: touch;} |
But，这个属性是有bug的，比如如果你的页面中有设置了绝对定位的节点，那么该节点的显示会错乱，当然还有会有其他的一些bug。
拓展知识：
-webkit-overflow-scrolling:touch是什么？
-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.auto: 使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止。touch: 使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。
只允许iframe子页面滑动， 禁止父页面滚动条,滑动
html,body 都加上overflow: hidden 就可以禁止父页面滑动。
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <!-- html,body 都加上overflow: hidden 就可以禁止父页面滑动 --> <html style="overflow: hidden;"> <body style="overflow: hidden;"> <!-- iframe --> <div class="contentBox"> <iframe width="100%" height="100%" src="https://www.baidu.com" id="contentBoxIframe"></iframe> </div> </body> </html> |
H5适配iphoneX底部留白问题
1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式
属性值有：contain 视窗包含网页
cover 网页覆盖视窗
auto 默认值，同contain效果
注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤。
|
1 2 3 |
<head> <meta id="viewport" name="viewport" content="viewport-fit=cover" /> </head> |
2、env() 和 constant()
ios新增特性函数，用于设置安全区域与边界的距离，有四个值
|
1 2 |
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ |
- safe-area-inset-left：安全区域距离左边边界距离
- safe-area-inset-right：安全区域距离右边边界距离
- safe-area-inset-top：安全区域距离顶部边界距离
- safe-area-inset-bottom：安全区域距离底部边界距离
底部兼容只需设置bottom边距即可
注意：env() 跟 constant() 需要同时存在，而且顺序不能换。
ios设备 iframe 适应高度
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<div class="contentBox"> <iframe width="100%" height="100%" src="https://www.baidu.com" id="contentBoxIframe"></iframe> </div> <style> .contentBox{ margin-top: 1.1rem; width: 100%; height: -moz-calc(100% - 1.1rem); // 高度自动计算，兼容火狐 height: -webkit-calc(100% - 1.1rem); // 高度自动计算，兼容移动端 height: calc(100% - 1.1rem); // 高度自动计算，pc overflow: hidden; -webkit-overflow-scrolling:touch; // 移动端，超出范围，滑动 overflow-scrolling: touch;// pc，超出范围，滑动 } </style> |
参考
h5 iframe显示不全_大多数人都会遇到的几个H5坑（实战）
H5适配iphoneX底部留白问题
ios设备使用iframe宽度超出屏幕的解决方法
