移动端开发

知识整理

• 实现思路整理，切图，实现
• 测试：浏览器模拟-rundev后生成特定链接>容器测试
• /去掉a标签或btn点击阴影效果/a { -webkit-tap-highlight-color: rgba(0,0,0,0); }
• swiper 实现手机滑动swiper = new Swiper('.swiper-container', { speed: 1000, initialSlide: 0, lazyLoading: true, direction: 'vertical', shortSwipes:'true', onTouchMove: function() { } });
• h5 页面能不用js尽量不用（各种错）
• 测试时不能用内测版支付宝测试（一个坑）

手机适配

• @media screen and (max-device-height: 480px) {} //iphone 4
• @media screen and (min-device-height: 481px) and (max-device-height: 568px) {}//iphone 5
• @media screen and (min-device-height: 569px) {}//iphone 6
• @media screen and (min-width: 414px) and (min-device-height: 668px) { /6plus/

zepto 模块

• zepto包含部分核心模块，其他模块如animate、touch需要引入对应模块js实现。

问题总结

• （旋转，掉落，横向移动）js动画效果跟css动画效果冲突，鱼和熊掌不可兼得，纯js实现动画效果效率太低、耗资源量大，不适合于手机端；纯css实现动画效果随机变化不好控。
• iphone 4兼容效果比较差，有些变量X%不响应，需要设置固定值（如480px）
• android 小蛋糕不显示 固定值不识别，要用%值。

• 在不同的环境显示效果不同（钱包活动一定在钱包测，uc浏览器测试iPhone4显示效果不对）
• 加载依赖出错（npm包错误，重新下载安装）
• json数据中key值多打了一个空格，a链接一直跳转到本页（跳转错误）

 

动画实现及优化

移动端提高动画效率：http://blog.sina.com.cn/s/blog_3f1fc8950102v0un.html
浏览器实现移动端高性能css3动画(开启gpu加速)http://www.jb51.net/css/125615.html
CSS3 Transitions, Transforms和Animation使用简介与应用展示http://www.zhangxinxu.com/wordpress/2010/11/css3-transitions-transforms%E5%92%8Canimation%E4%BD%BF%E7%94%A8%E7%AE%80%E4%BB%8B%E4%B8%8E%E5%BA%94%E7%94%A8%E5%B1%95%E7%A4%BA/

 

学习资料

无线前端开发经验集：http://www.atatech.org/articles/27393

调试：https://www.cnblogs.com/xy-nb/p/web.html