移动WEB开发入门

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)

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

 

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

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

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

 MobileWeb 适配总结

 

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