Mobile Web 开发之百味良药

webapp实践的总结:
It’s not a web app. It’s an app you install from the web.
当前 WEB APP 开发的最佳实践

移动web布局
移动Web单页应用开发实践——页面结构化 flex模板
深入了解 Flexbox 伸缩盒模型

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的最上面的时间、信号栏是黑色的，当然也可以设置其它参数，详细参数说明在：

Supported Meta Tags

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([e-mail]);}
}

字体
mac下网页中文字体优化
横竖屏会出现字体加粗不一致

禁止用户选中文字

-webkit-user-select:none

dp、sp、px傻傻分不清楚
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
zepto的一篇使用注意点讲解
zepto的著名的tap“点透”bug
zepto源码注释
使用zeptojs内嵌到android webview影响正常滚动 ---去掉61行,其实就是使用原生的滚动
iscroll4
Iscroll4使用心得
运用webkit绘制渲染页面原理解决iscroll4闪动的问题

工具
html5与css3技术应用评估
各种奇妙的hack
几乎所有设备的屏幕尺寸与像素密度表
移动设备参数表
ios端移动设备参数速查
浏览器兼容表
移动设备查询器
移动设备适配库
viewport与设备尺寸在线检测器
html5移动端兼容性速查
在线转换字体
css3选择器测试
兼容性速查表
浏览器的一些独特参数
各种各样的媒体查询收集
css3动画在线制作器
css3渐变在线制作器
移动端手势表
webkit独有的样式分析

响应式测试工具
resize添加到收藏夹后，可直接在浏览器中出现各种分辨率的选择工具来查看不同分辨率下的页面效果
ScreenQueries
responsivepx
responsinator
resizeMyBrowser
quirktools screenfly

其他
指尖上的js
移动Web产品前端开发口诀——“快”
移动Web开发，4行代码检测浏览器是否支持position:fixed
移动端web页面使用position:fixed问题总结

reygreen1据mobileTech整理而成。