移动端填坑之路

最新推荐文章于 2021-03-21 20:53:06 发布

weixin_34417814

最新推荐文章于 2021-03-21 20:53:06 发布

阅读量80

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zhuotiabo/p/6216828.html

本文分享了在移动端H5项目开发过程中遇到的各种兼容性问题及解决方案，包括UC浏览器对CSS3的支持限制、iOS设备上input元素的行为差异、以及不同浏览器触发滚动事件的时机等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

搞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(只有touch时触发touchmove)。只有当停止滚动后才会触发scroll。
在安卓手机上相对来说好很多

-webkit-overflow-scrolling

-webkit-overflow-scrolling: touch; /* 当手指从触摸屏上移开，会保持一段时间的滚动 */

-webkit-overflow-scrolling: auto; /* 当手指从触摸屏上移开，滚动会立即停止 */

兼容性：目前就Safari 5.0以上的IOS手机支持该属性

待续中-ing...

转载于:https://www.cnblogs.com/zhuotiabo/p/6216828.html