1)native 本地应用使用JAVA 、Objective-C、Swift开发
webAPP 网页应用HTML5开发
hybrid 混合应用ooxx(native,web)
2)文字 固定大小用px；多屏适配统一修改的话用rem
3)viewport
width- viewport的宽度
height- viewport的高度
initial-scale- 初始的缩放比例
maximum-scale- 允许用户缩放到的最大比例
user-scalable- 用户是否可以手动缩放
橫屏/竖屏
window.addEventListener('orientationchange', function() {
// rerender something
});
console.log(window.orientation); // 0, 90, 180, -90 顺时针角度
<style media="all and (orientation:portrait)" type="text/css">
/* 竖屏 */
</style>
<style media="all and (orientation:landscape)" type="text/css">
/* 横屏 */
</style>
FLEX 伸缩布局
display: -webkit-flex;
display: flex;
}
.initial {
-webkit-flex: initial;
flex: initial;
200px;
min- 100px;
}
.none {
-webkit-flex: none;
flex: none;
200px;
}
.flex1 {
-webkit-flex: 1;
flex: 1;
}
.flex2 {
-webkit-flex: 2;
flex: 2;
}
4) 打开数字软件盘
<input type="tel">
5）隐藏地址栏
setTimeout(function(){window.scrollTo(0,1);},0);
6)在iPhone,iPad,iTouch的safari上可以使用添加到主屏按钮将网站添加到主屏幕上
<link rel="apple-touch-icon" href="apple-touch-icon-iphone.png" /> <link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-ipad.png" /> <link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-iphone4.png" />
7)click 有 300± ms 延迟，使用 fastclick 后, 可以解决 click 的延迟, 还可以防止 穿透
8）区域滚动 overflow:auto 不靠谱，使用iscroll ，saber-scroll
9）用户手势集合
10）webkit-tap-highlight-color:RGBA(255,255,255,0)
可以屏蔽点击元素时出现的阴影, 常用于有事件代理的父元素
1) spa（single page application）也就是我们常常说的web应用程序webapp，被认为是业内的发展趋势，主要有两个优点：
① 用户体验好
② 可以更好的降低服务器压力
但是单页有几个致命的缺点：
① SEO支持不好，往往需要单独写程序处理SEO问题
② webapp本身的内存管理难，Javascript、Css非常容易互相影响
框架选择
jQuery大而全，兼容、性能良好；Zepto针对移动端定制，一些地方缺少兼容，但是尺寸小
MVC框架选择
MVC框架流行的有Backbone、angularJS、reactJS、canJS等
网络请求
① CSS Sprites
② lazyload
③ 合并脚本js文件
④ localsorage
工作中实际使用的离线缓存有localstorage与Application cache，这两个皆是好东西，一个常用于ajax请求缓存，一个常用于静态资源缓存
localstorage不被爬虫识别，不能跨域共享，所以不要用以存储业务关键信息，更加不要存储安全信息
Application cache是HTML5新增api，虽然都是存储，却与localstorage、cookie不太相同，Application cache存储的是一般是静态资源，允许浏览器请求这些资源时不必通过网络，设计得当的情况可以取代Hybrid的存储静态资源，使用Application cache主要优点是：
使用Application cache可以提升网站载入速度，主要体现在请求传输上，把一些http请求转为本地读取，有效地降低网络延迟，降低http请求，使用简单，还节约流量何乐而不为？
总结
一 单页门槛高，体验好 二 移动框架，轻为王道 三 mvc业务框架最好自造 四 模块化（requireJS）必不可少 五 冗余是优化的敌人，无论网站速度还是代码维护 六 css解耦乃长远之计 七 零请求无流量是优化的最终手段 八 速度优化缓存为王 九 Hybrid带来移动革命，与native保持接口调用即可