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宽度超出屏幕的解决方法