Safari H5适配问题

Posted 2023-05-15

参考技术A

1、 Safari 下 html 100% !== 100vh
参考 https://github.com/mui-org/material-ui/issues/12285
100vh 包含工具栏的高度；
100% 不含工具栏的高度 (即 视口高度)
元素进行绝对定位时， 若relative 元素是body， 绝对定位 top：0 ， bottom: 0 表现高度同 body 的高度， 即 100% ， bottom:0 为工具栏的上部； 100vh bottom:0 对应 工具栏的底部；
所有浏览器对于 100% 的解释相同： 即100% 是可见的视口高度 （测试为 window.innerHeight）；

2、 Safari 中禁止页面滚动

3、 Mobile Safari 10.0 之后 ignore了”user-scalable=no”的设定

以CSS touch-action: manipulation禁止double-tap手势

touch-action: manipulation; 禁止了双击方法， 禁用双击可缩放功能可减少浏览器在用户点击屏幕时延迟生成点击事件的需要，可以正常使用click， 也解决了点击穿透的问题；

移动端浏览器，比如ios10以上的Safari，安卓系统下的UC浏览器、QQ浏览器等，为了更好的用户体验，并没有遵循开发者禁止缩放的指定，虽然meta标签 ”user-scalable=no”写法，但依然允许用户双指缩放和双击放大。

4、祖先元素应用 relative/absolute 定位后 ， 再应用z-index ，除 z-index： auto 外， safari 下 fixed 异常；
祖先元素应用 Fixed 定位，其fixed 的子元素正常；

h5移动端适配iOS遇到的问题

1.h5移动端用iOS内置浏览器Safari打开时，屏幕距离底部百分之十的部分是无法点击的，一点击就会出现工具栏，没有解决方案。

2.做第三方支付的时候，我们是用的ping++，走支付宝支付的时候，支付完成后会停留在支付宝APP中，无法自动返回h5。  后来跟ping++技术人员沟通后，发现iOS 是没有办法自动返回 H5 页面的，这是 苹果系统的原因，只能手动返回。安卓则能够正常返回。