关于一些奇葩的兼容bug

本文列举并分析了一些在移动开发中遇到的特定设备兼容性问题,如iPhoneXr的canvas层级问题,display:fixed元素在滚动时的跟随问题,Android单行文字垂直居中问题,滑动穿透现象,1px边框问题,以及input框点击位置移动问题。针对这些问题,文章提供了相应的解决方案,包括调整元素层级,改变布局结构,使用CSS技巧和自定义滚动组件等。
摘要由CSDN通过智能技术生成

iPhoneXr canvas层级失效

在这里插入图片描述
大致就是这样,一个img在canvas上面,所有手机img正常显示,就是ios的这个机型有问题,系统版本14.0
img的层级不论多大都会被canvas覆盖
解决办法尽然是将canvas的层级设置为-1.虽然逻辑上没有毛病,但是着实让人费解

display:fixed元素滚动跟随

在这里插入图片描述
如图大致所示,navbar可以是搜索框也可以是底部导航栏,滑动page时,navbar跟随滚动,这个问题是由于布局时navbar写在了page元素内,由于布局上下文的原因,此时的navbar就不只是简简单单的相对于视窗了.这个解释虽然有一定的道理,但是对于Android端来说并不会导致滚动跟随…这个应该就是ios内部机制问题了
解决办法:将fixed元素从要滚动的元素内拿出,放在平级以上就行,或者干脆改用flex布局

Android单行文字无法上下垂直居中的问题

这个问题我觉得对于强迫症来说确实有问题,但是视觉效果上来说,垂直居中是偏上一点点会让人觉得上下是居中的(这个出自老外的一本书 css揭秘),不过Android机型普遍特别是文字字号小于14px的时候偏上明显…这个目前在我看来,单从css来说没有彻底的解决方法,网上有各种奇技淫巧,其实都治标不治本,最厉害的方式,我看啊,如果真的过不了测试和UED的眼睛,那就只能切图了.

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值