移动端填坑之路

Posted W+7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端填坑之路相关的知识,希望对你有一定的参考价值。

搞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. 在安卓手机上相对来说好很多

以上是关于移动端填坑之路的主要内容,如果未能解决你的问题,请参考以下文章

Elasticsearch-2.3.x填坑之路

Google Flutter的填坑之路

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

H5嵌入原生开发小结----兼容安卓与ios的填坑之路

vue-devtools与yarn的填坑之路

vue-devtools与yarn的填坑之路