移动端开发
2015-12-31 10:43
253 查看
知识整理
实现思路整理,切图,实现测试:浏览器模拟-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/
相关文章推荐
- Android各国语言对照表
- Android webview如何上传文件和添加进度条
- Android开发之项目初建时设置minSdkVersion,maxSdkVersion,targetSdkVersion,compile作用
- Mac环境下使用android studio jni基础
- android ScrollView滑动时出现的阴影如何去除
- iOS中Block代码块的使用
- OC 与JS(WebView)交互
- iOS开发之UIWebView(二)
- iOS 消息推送 点击app图标 app icon如何获取推送信息 leanCloud 点击app图标 获得推送消息
- android-Displaying Graphics with OpenGL ES
- iOS应用程序发布AppStore及更新流程
- android优秀开源代码
- android 判断是否设置了锁屏密码
- Android布局之FrameLayout帧布局
- Android之点击切换图片
- Android开源项目pulltorefresh分析与简单使用
- 图解Glide流程
- android常用网址收集
- 【笔记】关于android中shape使用的注意事项
- Android版添加phonegap--Sqlite实现离线功能技术教程