我的h5最佳实践
2016-03-28 15:39
656 查看
viewport
<meta name="viewport" content="width=device-width, initial-scale=1">
这个必须设置，viewport翻译过来叫适口，它指定了h5页面的宽度和手机的宽度一样，而且初始化没有放大，是按1：1显示的。
事件：touch和click的区别
在web里只有click，而移动端既有click又有touch，所以问题就来了
我怎么样区分它们呢？
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
touchstart ：手指放在一个DOM元素上。
touchmove ：手指拖曳一个DOM元素。
touchend ：手指从一个DOM元素上移开。
其实还有一个touchcancel
其实click也是touch，不过先识别一下，如果是touch就是touch，如果不是touch就当click处理。
结论肯定是touch反应比click快，所以移动的有一个比较好的实践
使用zeptojs的tap的手势
使用fastclick库
通过CSS3 Media Query实现响应式Web设计
http://www.w3.org/TR/css3-mediaqueries/#media1
CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。
比较有名是bootstrap和foundation
http://getbootstrap.com/ http://foundation.zurb.com/
Bootstrap支持的Media Query分类5种
大屏幕 大于或等于1200px 70px 30px 默认 大于或等于980px 60px 20px
平板电脑 大于或等于768px 42px 20px
手机到平板电脑 小于或等于767px 流式列，无固定宽度
手机 小于或等于480px 流式列，无固定宽度
具体样式结构如下：
/* 大屏幕 */
@media (min-width: 1200px) {
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
}
/* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
@media (max-width: 767px) {
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}
图片处理
device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。
来个例子
```
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>利用media query让背景图适应不同分辨率的设备</title>
<style>
/* 像素比为1，链入100px的图片， background-size：100% */
.header { background: url(Logo_1.png) no-repeat; }
/*像素比为1.5，链入150px的图片， background-size：1/1.5=66.7% */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.header { background: url(Logo_1-5.png) no-repeat; background-size:66.7%; }
}
/*像素比为2，链入200px的图片， background-size：1/2=50% */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.header { background: url(Logo_2-0.png) no-repeat; background-size: 50%;}
}
.w100{width:100px;height:100px;}
</style>
</head>
<body></body>
</html>
```
我其实还想告诉更简单的办法：layzr.js
https://github.com/callmecavs/layzr.js
ajax + pushstate
pushstate说的简单点就是页面不动，就可以改变url，好神奇的
原生控件里的navigation的推进，推出效果，可以借助ajax + pushstate来实现
最经典的例子是：http://i5ting.github.io/ratchet-practice/#106
本地缓存
查看storage在浏览器中的支持情况
http://html5test.com/compare/feature/storage-localStorage/storage-sqlDatabase/storage-indexedDB.basic.html
localstorage（key-value存储）
websql（sqlite）
indexdb（NoSQL）
分析上面的结果
android平台
Android 1.6 » 都不支持
Android 2.x » 不支持indexdb，其他都支持
Android 3.2 » 不支持indexdb，其他都支持
Android 4.0 » 支持localstorage，但不支持其他2种
Android 4.0+ » 都支持
iOS平台
iOS 2.2 » 支持websql，其他都不支持
iOS 3.1 -- iOS 7.0 » 不支持indexdb，其他都支持
iOS 8.0 »
Windows Phone 平台
Windows Phone 7 » 都不支持
Windows Phone 7.5 » 只是支持localstorage
Windows Phone 8 » 只是不支持websql
Windows Phone 8.1 »只是不支持websql
总结
绝大部分都支持localstorage，不支持localstorage的如
ios2.2，可以选websql，
Android 4.0 » 只能用localstorage
Windows Phone 7，没有任何选择
支持第二好的是websql
支持最差的是indexdb
所以我们的解决方案是
如果有indexdb就用indexdb
若果有websql就用websql
什么都没有的时候，使用localstorage存，近于万能
更多看一下我写的缓存层通用的库
https://github.com/i5ting/Collection.js
浏览器特性监测工具库
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
http://modernizr.com
代码
https://github.com/Modernizr/Modernizr
使用更小更轻量级的库
比如jquery要换成zeptojs。包括像jquery mobile也是建议用zeptojs
常用的网站优化技巧，能上的必须上。
http://zeptojs.com/
手势库
Pan
Pinch
Press
Rotate
Swipe
Tap
https://github.com/hammerjs/hammer.js
其实zeptojs里也有很多，不过没有hammer.js全而已
拖拽库
Drag and drop so simple it hurts https://github.com/bevacqua/dragula
滑动组件
最出名的iscroll，跟原生效果差不多，支持下拉刷新之类的，代码比较难懂，还是挺有意思的。
swiper 实际也是基于iscroll封装通用库，现在微信里比较常见的效果，大部分都是这东西搞出来的。
示例：http://www.swiper.com.cn/demo/senior/index.html
css动画框架
2w多个star的项目，各种效果相当不错
http://daneden.github.io/animate.css/
代码：https://github.com/daneden/animate.css
弹出框alert
比较好的是 layer.mobile
http://sentsin.com/layui/layer/
html5 boilerplate
最流行的web开发前端模版
HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。
著名的h5开发框架
jQuery Mobile
Sencha Touch
都比较重
jqm的css样式比较难写，特点是data属性标签
st主要是oo，控件丰富，js基础要比较好的才能写，门槛很高
不过一般都没必要用，除非项目非常大，比如微信的项目随便写写就好了
了解app开发的2种方式
native 原生的
hybrid 混搭，即h5开发，通过webivew来加载，然后通过phonegap打包
了解phonegap
最早是adobe的一个项目，后来捐给apache基金会了，但phonegap的域名和商标仍然是adobe的，所以后来只能更名为apache cordova项目
原理
h5可以运行在所有移动端浏览器上
每个os上都有浏览器支持的框架，基本都叫webview
把h5写的东西放到www里，然后采用各自原生的打包方式打包
如果h5写不来的功能，可以采用phonegap得插件机制，使用原生代码完成
于是h5通过webview就变成了原生app
开发快
不用考虑更多关系os的细节
但是它也有缺点
交互不能太复杂
输入框，定位等各种问题
性能，现在好很多了，在iphone6+，基本和原生一样
前景
网速越来越快
硬件越来越nb
摩尔定律
h5和hybrid将继续看好
快速原型h5框架
ratchet 是twitter那帮人写的快速原型框架，很简单
http://cnratchet.com/components
我写的实践总结
https://github.com/i5ting/ratchet-practice
ionicframework
ionic是目前最方便的hybrid框架
官网：ionicframework.com
教程：https://github.com/i5ting/ionic_ninja
技术栈
phonegap（打包，插件）
angular（最流行的前端框架，ioc，双向绑定，指令等）
gulp
支持cli命令行工具
cnode有一个客户端就是ionic写的，代码还可以
下一个趋势：必然是基于react的
基于react的控件库
http://reapp.io
reapp其实就ionic里把angularjs替换成reactjs而已，其他基本一样。
全文完
<meta name="viewport" content="width=device-width, initial-scale=1">
这个必须设置，viewport翻译过来叫适口，它指定了h5页面的宽度和手机的宽度一样，而且初始化没有放大，是按1：1显示的。
事件：touch和click的区别
在web里只有click，而移动端既有click又有touch，所以问题就来了
我怎么样区分它们呢？
三种在规范中列出并获得跨移动设备广泛实现的基本触摸事件：
touchstart ：手指放在一个DOM元素上。
touchmove ：手指拖曳一个DOM元素。
touchend ：手指从一个DOM元素上移开。
其实还有一个touchcancel
其实click也是touch，不过先识别一下，如果是touch就是touch，如果不是touch就当click处理。
结论肯定是touch反应比click快，所以移动的有一个比较好的实践
使用zeptojs的tap的手势
使用fastclick库
通过CSS3 Media Query实现响应式Web设计
http://www.w3.org/TR/css3-mediaqueries/#media1
CSS3中的media query属性让我们可以根据浏览器的高宽，设备的像素比等来使用不同的CSS。当然它还一些别的用法，具体请参考这里。
比较有名是bootstrap和foundation
http://getbootstrap.com/ http://foundation.zurb.com/
Bootstrap支持的Media Query分类5种
大屏幕 大于或等于1200px 70px 30px 默认 大于或等于980px 60px 20px
平板电脑 大于或等于768px 42px 20px
手机到平板电脑 小于或等于767px 流式列，无固定宽度
手机 小于或等于480px 流式列，无固定宽度
具体样式结构如下：
/* 大屏幕 */
@media (min-width: 1200px) {
}
/* 平板电脑和小屏电脑之间的分辨率 */
@media (min-width: 768px) and (max-width: 979px) {
}
/* 横向放置的手机和竖向放置的平板电脑之间的分辨率 */
@media (max-width: 767px) {
}
/* 横向放置的手机及分辨率更小的设备 */
@media (max-width: 480px) {
}
图片处理
device-pixel-ratio是media query一查询条件，用于获得设备的像素比。一般来说iPhone4/4s的值是2，高分辨率的Andriod设备是1.5，一般设备是1，有了这些条件，我们就可以为不同的设备提供不同分辨率的图片了。
事先假定让图片兼容以上像素比，展示一张宽高为100px的图片。首先我们需要准备三张不同分辨率的图片：当正常像素比为1时，我们载入的是正常图片100px*100px，当像素比为1.5时，载入150px*150px的图片，当像素比为2.0，载入200px*200px的图片。
来个例子
```
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
<title>利用media query让背景图适应不同分辨率的设备</title>
<style>
/* 像素比为1，链入100px的图片， background-size：100% */
.header { background: url(Logo_1.png) no-repeat; }
/*像素比为1.5，链入150px的图片， background-size：1/1.5=66.7% */
@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
.header { background: url(Logo_1-5.png) no-repeat; background-size:66.7%; }
}
/*像素比为2，链入200px的图片， background-size：1/2=50% */
@media only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
.header { background: url(Logo_2-0.png) no-repeat; background-size: 50%;}
}
.w100{width:100px;height:100px;}
</style>
</head>
<body></body>
</html>
```
我其实还想告诉更简单的办法：layzr.js
https://github.com/callmecavs/layzr.js
ajax + pushstate
pushstate说的简单点就是页面不动，就可以改变url，好神奇的
原生控件里的navigation的推进，推出效果，可以借助ajax + pushstate来实现
最经典的例子是：http://i5ting.github.io/ratchet-practice/#106
本地缓存
查看storage在浏览器中的支持情况
http://html5test.com/compare/feature/storage-localStorage/storage-sqlDatabase/storage-indexedDB.basic.html
localstorage（key-value存储）
websql（sqlite）
indexdb（NoSQL）
分析上面的结果
android平台
Android 1.6 » 都不支持
Android 2.x » 不支持indexdb，其他都支持
Android 3.2 » 不支持indexdb，其他都支持
Android 4.0 » 支持localstorage，但不支持其他2种
Android 4.0+ » 都支持
iOS平台
iOS 2.2 » 支持websql，其他都不支持
iOS 3.1 -- iOS 7.0 » 不支持indexdb，其他都支持
iOS 8.0 »
Windows Phone 平台
Windows Phone 7 » 都不支持
Windows Phone 7.5 » 只是支持localstorage
Windows Phone 8 » 只是不支持websql
Windows Phone 8.1 »只是不支持websql
总结
绝大部分都支持localstorage，不支持localstorage的如
ios2.2，可以选websql，
Android 4.0 » 只能用localstorage
Windows Phone 7，没有任何选择
支持第二好的是websql
支持最差的是indexdb
所以我们的解决方案是
如果有indexdb就用indexdb
若果有websql就用websql
什么都没有的时候，使用localstorage存，近于万能
更多看一下我写的缓存层通用的库
https://github.com/i5ting/Collection.js
浏览器特性监测工具库
Modernizr is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
http://modernizr.com
代码
https://github.com/Modernizr/Modernizr
使用更小更轻量级的库
比如jquery要换成zeptojs。包括像jquery mobile也是建议用zeptojs
常用的网站优化技巧，能上的必须上。
http://zeptojs.com/
手势库
Pan
Pinch
Press
Rotate
Swipe
Tap
https://github.com/hammerjs/hammer.js
其实zeptojs里也有很多，不过没有hammer.js全而已
拖拽库
Drag and drop so simple it hurts https://github.com/bevacqua/dragula
滑动组件
最出名的iscroll，跟原生效果差不多，支持下拉刷新之类的，代码比较难懂，还是挺有意思的。
swiper 实际也是基于iscroll封装通用库，现在微信里比较常见的效果，大部分都是这东西搞出来的。
示例：http://www.swiper.com.cn/demo/senior/index.html
css动画框架
2w多个star的项目，各种效果相当不错
http://daneden.github.io/animate.css/
代码：https://github.com/daneden/animate.css
弹出框alert
比较好的是 layer.mobile
http://sentsin.com/layui/layer/
html5 boilerplate
最流行的web开发前端模版
HTML5 Boilerplate 帮你构建 快速, 健壮, 并且 适应力强 的web app或网站。 这个小小的源码包集合了100位开发者的经验，你可以将这些经验运用在你的项目中。
著名的h5开发框架
jQuery Mobile
Sencha Touch
都比较重
jqm的css样式比较难写，特点是data属性标签
st主要是oo，控件丰富，js基础要比较好的才能写，门槛很高
不过一般都没必要用，除非项目非常大，比如微信的项目随便写写就好了
了解app开发的2种方式
native 原生的
hybrid 混搭，即h5开发，通过webivew来加载，然后通过phonegap打包
了解phonegap
最早是adobe的一个项目，后来捐给apache基金会了，但phonegap的域名和商标仍然是adobe的，所以后来只能更名为apache cordova项目
原理
h5可以运行在所有移动端浏览器上
每个os上都有浏览器支持的框架，基本都叫webview
把h5写的东西放到www里，然后采用各自原生的打包方式打包
如果h5写不来的功能，可以采用phonegap得插件机制，使用原生代码完成
于是h5通过webview就变成了原生app
开发快
不用考虑更多关系os的细节
但是它也有缺点
交互不能太复杂
输入框，定位等各种问题
性能，现在好很多了，在iphone6+，基本和原生一样
前景
网速越来越快
硬件越来越nb
摩尔定律
h5和hybrid将继续看好
快速原型h5框架
ratchet 是twitter那帮人写的快速原型框架，很简单
http://cnratchet.com/components
我写的实践总结
https://github.com/i5ting/ratchet-practice
ionicframework
ionic是目前最方便的hybrid框架
官网：ionicframework.com
教程：https://github.com/i5ting/ionic_ninja
技术栈
phonegap（打包，插件）
angular（最流行的前端框架，ioc，双向绑定，指令等）
gulp
支持cli命令行工具
cnode有一个客户端就是ionic写的，代码还可以
下一个趋势：必然是基于react的
基于react的控件库
http://reapp.io
reapp其实就ionic里把angularjs替换成reactjs而已，其他基本一样。
全文完
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Html5 web worker 的总结
- HTML5来了，7个混合式移动开发框架
- 提升HTML5的性能体验系列之一 避免切页白屏
- 一个html5的小游戏
- 利用 chrome 做本地HTML5全屏应用
- 使用Flexible实现手淘H5页面的终端适配
- artEditor增加h5拍照上传图片
- HTML5表单属性（二）
- HTML5必须知道的那些事
- html5-menu
- html5-menu
- 移动HTML5前端性能优化指南
- pageResponse - 让H5适配移动设备全家
- html5文本超出部分用省略号表示
- HTML5与CSS3基础（四）
- 关于Html5发展和应用前景
- 关于Html5发展和应用前景
- 通过 html5 FileReader 实现上传图片预览功能
- html5对于IE6的兼容性问题
- Html5全屏_IE