###移动技术
根据mobileTech项目整理而成，原文地址。
####webapp实践的总结
It’s not a web app. It’s an app you install from the web.
####移动web布局
####viewport
锁定 viewport
ontouchmove="event.preventDefault()" //锁定viewport，任何屏幕操作不移动用户界面（弹出键盘除外）。
####link与meta
1.桌面图标
<link rel="apple-touch-icon-precomposed" href="http://www.xxx.com/App_icon_114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://www.xxx.com/App_icon_72.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://www.xxx.com/App_icon_114.png" />
这个属性是当用户把连接保存到手机桌面时使用的图标，如果不设置，则会用网页的截图。有了这，就可以让你的网页像APP一样存在手机里了.
2.启动画面
<link rel="apple-touch-startup-image" href="/img/startup.png" />
这个是APP启动画面图片，用途和上面的类似，如果不设置，启动画面就是白屏，图片像素就是手机全屏的像素
3.时间信号栏
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
这个描述是表示打开的web app的最上面的时间、信号栏是黑色的，当然也可以设置其它参数，详细参数说明在：
4.全屏适配
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
这2个描述也很有用的，如果没有它，你的web app会用safari浏览器打开，有了它，就会用独立进程的无地址栏的打开，完全可以和普通的APP比拟了
5.视网膜屏幕适配
下面还有个不错的css，是用来区分视网膜屏幕的，这样你可以在iphone这样的手机里载入2x的图片，就不会模糊了
@media only screen and (-webkit-min-device-pixel-ratio:1.5),only screen and (min--moz-device-pixel-ratio:1.5),only screen and (min-device-pixel-ratio:1.5),only screen and (min-resolution:200dpi)
{
#logo{background-image: url([email protected]);}
}
####字体
禁止用户选中文字
-webkit-user-select:none
Pixel density, retina display and font-size in CSS
####图片(retina)
Using CSS Sprites to optimize your website for Retina Displays
使用CSS3的background-size优化苹果的Retina屏幕的图像显示
使用css sprites来优化你的网站在Retina屏幕下显示
CSS IMAGE SPRITES FOR RETINA (HIRES) DEVICES
####点击与click
对于a标记的点击导航，默认是在onclick事件中处理的。而移动客户端对onclick的响应相比PC浏览器有着明显的几百毫秒延迟。
在移动浏览器中对触摸事件的响应顺序应当是：
ontouchstart -> ontouchmove -> ontouchend -> onclick
因此，如果确实要加快对点击事件的响应，就应当绑定ontouchend事件。
使用click会出现绑定点击区域闪一下的情况，解决：给该元素一个样式如下
-webkit-tap-highlight-color: rgba(0,0,0,0);
如果不使用click，也不能简单的用touchstart或touchend替代，需要用touchstart的模拟一个click事件，并且不能发生touchmove事件，或者用zepto中的tap（轻击）事件。
click 事件普遍 300ms 的延迟 在手机上绑定click 事件，会使得操作有300ms 的延迟，体验并不是很好。 开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。
Eliminate 300ms delay on click events in mobile Safari
####动画
动画效果中，使用translate比使用定位性能高
Why Moving Elements With Translate() Is Better Than Pos:abs Top/left
消除transition闪屏,两个方法:
-webkit-transform-style: preserve-3d;
/*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility:?hidden;
/*（设置进行转换的元素的背面在面对用户时是否可见：隐藏）*/
####库
zepto.js
使用zeptojs内嵌到android webview影响正常滚动 ---去掉61行,其实就是使用原生的滚动
iscroll4
运用webkit绘制渲染页面原理解决iscroll4闪动的问题
####工具
####响应式测试工具
resize添加到收藏夹后，可直接在浏览器中出现各种分辨率的选择工具来查看不同分辨率下的页面效果
####其他