本文将带你了解WEBAPP开发移动开发学习笔记，希望本文对大家学WEBAPP有所帮助。

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>

matchMedia

FLEX   伸缩布局

  display: -webkit-flex;  display:   flex;}.initial {  -webkit-flex:   initial;          flex: initial;  width: 200px;  min-width: 100px;}.none {  -webkit-flex: none;          flex: none;  width: 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)

可以屏蔽点击元素时出现的阴影,   常用于有事件代理的父元素

 2 移动端真机调试终极利器-BrowserSync

 3 浅谈移动前端的最佳实践

东西讲的很多，满满都是干活，只好慢慢看了~

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保持接口调用即可

 4 移动前端不得不了解的html5 head   头标签

 5 MobileWeb   适配总结

 6 移动端开发所需要的一些资源与小技巧

本文由职坐标整理并发布，希望对同学们有所帮助。了解更多详情请关注职坐标移动开发之WebApp频道！