移动端填坑之路

Posted 2020-08-24

搞PC项目，最头疼的莫过于做IE6/7/8的兼容性（很蛋疼的事）。而在如今移动端H5的兴起中，面对形形色色的机型，各种各样的品牌手机，导致我吗们FE们要做各种手机适配问题、样式兼容问题等等（巨烦，找问题还不好找）。以下是在移动端项目之路上所遇到的各种问题:

---

• UC浏览器——css3的坑

最近在做一个移动端项目，涉及到评论模块，有评论必有点赞功能，当然也就存在点赞动画效果，第一反应就是利用css3动画效果。

方案一:transition+伪元素 。方案二:transition。方案呢三:animation+伪元素。方案呢四:animation。
背景:项目最终是放在支付宝平台上的，而支付宝用的是UC内核。
在chrome、qq、微信等等打开都是没问题（perfect，以为大功告成了...），谁知最后在支付宝（uc内核）打开...方案一/方案二/方案三都是一点效果都没有（这是针对安卓手机没效果，对于ios效果还是有的，可见乔布斯的强大啊）...呜呜呜...天啊，这是咋回事呢？

总结:在UC浏览器中，不支持伪元素使用css3动画，对于transition动画也不佳。提倡使用方案四...

• css动画请使用transform

当我们使用css3的时候尽量使用transform，而非直接控制width,height,margin，否则会造成大量的计算，性能堪忧。transfrom会把元素独立出来单独计算的。

• 页面底部放一个position为fixed的input输入框

1. IOS手机上，当input聚焦后输入框会飞（被输入法顶上去后并不是紧贴输入法而是定位在正中间，而且位置可以被我们随便上下移动），没法实现我们想要的
2. 安卓手机上是正常的

• scroll滚动事件

1. qq浏览，uc浏览以及ios的浏览器，滚动时并不会时时触发scroll事件，但会触发touchmove。只有当停止滚动后才会触发scroll。
2. 在安卓手机上相对来说好很多