搞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输入框
- IOS手机上，当input聚焦后输入框会飞（被输入法顶上去后并不是紧贴输入法而是定位在正中间，而且位置可以被我们随便上下移动），没法实现我们想要的
- 安卓手机上是正常的
- scroll滚动事件
- qq浏览，uc浏览以及ios的浏览器，滚动时并不会时时触发scroll事件，但会触发touchmove。只有当停止滚动后才会触发scroll。
- 在安卓手机上相对来说好很多
时间： 2024-11-05 15:06:37