关于一些奇葩的兼容bug

最新推荐文章于 2024-04-29 20:00:29 发布

麻烦让一让，我比较宽

最新推荐文章于 2024-04-29 20:00:29 发布

阅读量689

点赞数

分类专栏：前端文章标签：移动开发

本文链接：https://blog.csdn.net/snailmar/article/details/108838490

版权

本文列举并分析了一些在移动开发中遇到的特定设备兼容性问题，如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的眼睛,那就只能切图了.