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