移动端-项目基础总结------彭记（020）

移动端的项目已经做过好几个了，在这里做个简单的知识小总结

移动端常用类库及优缺点

1. jQuery Mobile 是 jQuery 发布的针对手机和平板设备、经过触控优化的 Web 框架.它基于 jQuery,在不同移动设备平台上
可提供统一的用户界面.该框架基于渐近增强技术,并利用 HTML5 和 CSS3 特性.Query Mobile 继承了 jQuery 的优势,并且提供了丰
富的适合手机应用的 UI 组件.jQuery Mobile 还有很多的第三方扩展.

2. Zepto.js 是支持移动 WebKit 浏览器的 JavaScript 框架,具有与 jQuery 兼容的语法.相对于 jQuery Mobile 更加轻量级,大小为
2-5k 的库,通过不错的 API 处理绝大多数的基本工作.

3. Sencha Touch 做的 Web App 看起来更像 Native App,用户界面组件和丰富的数据管理,全部基于最新的 HTML 5 和 CSS3 的WEB 标准,全面兼容 Android 和 iOS 设备.Sencha Touch 提供了超过 50 个组件.
 
4.GMU(Global Mobile UI)是百度前端通用组开发的移动端组件库,具有代码体积小、简单、易用等特点,组件内部处理了很多移动端的 bug,覆盖机型广,能大大减少开发交互型组件的工作量,非常适合移动端网站项目. 该组件基于 zepto 的 mobile UI 组件库, 提供 webapp、pad 端简单易用的 UI 组件!

5. Frozen UI 是腾讯 ISUX 团队(社交用户体验设计团队)根据最新的手机 QQ 设计规范制作的移动端 Web 框架,包括 CSS 基础样式和组件、JavaScript 基础组件和一些动画效果库.

6. Ionic提供了一个免费且开源的移动优化 HTML,CSS 和JS 组件库,来构建高交互性应用.基于 Sass 构建和 AngularJS 优
化.Ionic 既是一个 CSS 框架也是一个 Javascript UI 库.许多组件需要 Javascript 才能产生神奇的效果,尽管通常组件不需要编码,通过框架扩展可以很容易地使用,比如我们的 AngularIonic 扩展.


7. Junior 为前端框架,用来构建基于 HTML5 的移动 Web 应用,外观与行为跟本地应用相似.它采用针对移动性能优化的 CSS3转换,支持旋转灯箱效果,包含多样的 Ratchet UI 组件.整个框架使用 Zepto(类似 jQuery 语法的轻量级移动设备 js 类库),且整合了
backbone.js 的视图和路由. Junior 十分易于使用,且提供详细的文档及案例,便于学习.

移动端最小触控区域大小

IOS 上 44 * 44px
Android 上 48 * 48dp 可以给文字、图标、按钮等可操作元素扩展触控区域, padding、line-height 等都是不错的方式.

移动端的点击事件的有延迟

click 有 300ms 延迟,为了实现 safari 的双击事件的设计,浏览器要知道你是不是要双击操作
解决 1:直接禁用缩放<meta name="viewport" content="width=device-width, user-scalable=no">
解决 2:使用 fastclick 库
解决 3: 用 css 设置-ms-touch-action: none,那么对应的元素在被点击之后,浏览器不会启动缩放操作,也就避免了这个
300ms 延迟