【经验分享】iPhone X 兼容及滚动优化

简介: 【经验分享】iPhone X 兼容及滚动优化

官方文档如下:https://opensupport.alipay.com/support/knowledge/31867/201602476696?ant_source=zsearch

按照官方文档的操作较为复杂。


而对于position: fixed的可交互组件,如果渲染在iPhone X的安全区域外,容易误触 Home Indicator,应当把可交互的部分都渲染到安全区域内。

建议使用以下acss进行兼容


padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

如果你想在安全区域外再加多少rpx 也可以这样操作嗷~

padding-bottom: calc(env(safe-area-inset-bottom) + 32rpx);

其他性能优化:

惯性滚动会使滚动比较顺畅,在安卓下默认有惯性滚动,而在 iOS 下需要额外设置-webkit-overflow-scrolling: touch的样式

目录
相关文章
|
10月前
|
Android开发 iOS开发 Windows
无影产品动态|iOS & Android客户端6.0.0版本发布,提升触控灵敏度,操作体验更丝滑
无影ios & Android客户端6.0.0版本发布!移动端触控体验更舒适,用户操作更便捷,一起来看看!
690 0
无影产品动态|iOS & Android客户端6.0.0版本发布,提升触控灵敏度,操作体验更丝滑
|
监控 测试技术 iOS开发
Airtest重磅更新,对iOS的支持全面升级优化啦!
Airtest重磅更新,对iOS的支持全面升级优化啦!
432 0
|
Dart Java Shell
Flutter多屏特性尝鲜
在三月份过去的flutter engage大会中,除了重量级的flutter 2,让flutter适配的机型遍布移动,桌面,web端外,还有支持现在各大厂商踊跃推出的折叠屏的[多屏适配特性](https://devblogs.microsoft.com/surface-duo/flutter-dual-screen-foldable/)。 这特性提出的原因是是微软的员工使用flutter给自家的
|
缓存 Serverless 对象存储
iOS系统开发提升体验优化方案
随着Flutter等跨端框架的出现,业务开发同学经常需要在Android/IOS上跨端进行业务开发,问题定位等。新的不熟悉的环境的搭建总会遇到各种各样的问题,导致搭建失败,特别是IOS开发环境,是最复杂的,不仅环境搭建繁琐,而且切分支后的打包速度很慢,所以我们设计实现了两个工具,用于优化闲鱼IOS开发体验。
|
Web App开发
Firefox 5新功能特性一览
虽然Firefox 4还没有发布,Mozilla的UI团队已经开始为今年晚些时候发布的Firefox 5做准备了。下面让我们窥探一下Firefox 5的一些新功能。 特定网站浏览 特定网站浏览 这是一个有趣的功能,可以将特定网站设为专用标签。
676 0
|
缓存 算法 iOS开发
iOS性能优化系列篇之“列表流畅度优化”
原文作者:Hello_Vincent原文地址:https://juejin.im/post/5b72aaf46fb9a009764bbb6a#heading-1 这一篇文章是iOS性能优化系列文章的的第二篇,主要内容是关于列表流畅度的优化。
1389 0
|
编解码 前端开发 Android开发
聊聊安卓折叠屏给交互设计和开发带来的变化
很多年前,前端同学都觉得PC端的适配(兼容处理)难,都认为移动端的时代适配会容易得多,也无需考虑那么多的事情。事实并非如此,移动端的时代同样面临着各种适配的处理。特别是刘海机的出现,前端需要考虑刘海机适配。
1987 0
|
Android开发
Android 7.0 重磅新功能:原生支持压力屏
虽说之前谷歌发布了安卓7.0的预览版,但它仅仅加入了分屏多任务等小功能,真正的看点还是留到I/0大会上。 5S催生了Touch ID指纹识别的普及,而到了iPhone 6S,苹果带来的3D Touch,也引来众多竞争对手的效仿,特别是安卓阵营,但他们存在一个致命问题。
1260 0