• 欢迎来到本博客,希望可以y一起学习与分享

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

前端 benz 6个月前 (01-01) 55次浏览 0个评论 扫描二维码
文章目录[隐藏]

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


文章 iframe 移动端适配 以及 H5适配iphoneX 底部安全区域留白问题 转载需要注明出处
喜欢 (0)

您必须 登录 才能发表评论!