iPad web APP 开发相关
1、移除 browser chrome，全屏启动
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
要先保存到主屏幕，然后从点击主屏幕进入。。
2、停留在web APP里面
当在web APP里面点击链接的时候，APP会立即关闭然后使用浏览器打开链接（web APP不等同于Safari）
解决方法1、转换成单页面APP，用fragment links 或 AJAX callbacks来做链接
或者绑定click事件，取消浏览器默认行为
3、提示人们可以把web APP添加到主屏幕，参考Iscroll作者的插件 http://cubiq.org/add-to-home-screen
4、装饰icon，添加到桌面：
<link rel="apple-touch-icon" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lm57.png" sizes="57x57"/>
<link rel="apple-touch-icon" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lm72.png" sizes="72x72" />
<link rel="apple-touch-icon" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lm114.png" sizes="114x114" />（非retain屏幕iPad ）
<link rel="apple-touch-icon" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lm144.png" sizes="144x144" />
前三个是用于开始icon，设备会自动选择相对应的尺寸
<link rel="apple-touch-startup-image" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/startup-iphone.png" sizes="320x460" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/startup-iphone4.png" sizes="640x920" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lmsplash1004.png" sizes="768x1004" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<link rel="apple-touch-startup-image" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/images/lmsplash748.png" sizes="1024x748" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
这四个设定web APP的开始图片，前三个用于竖屏状态下的iPhone，有retain屏幕的iPhone，iPad，第四条用于横屏的iPad， size不可缺少不然图片会被无视掉
5、保持显示内容不被缩放当屏幕方向改变时
<meta name='viewport' content='initial-scale=1.0,width=device-width' />
<link type="text/css" rel="stylesheet" media="all" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/css/landscape.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width:1024px) and (orientation:portrait)" href="http://3w7ov13ob0hk2kk1w147yffjlu5.wpengine.netdna-cdn.com/css/portrait.css" />
按照横屏模式思考，然后转化为竖屏模式
还需要保证字体不会被缩放，下面的脚本实现
<script type="text/javascript">
/*
* This bit of code disables user scaling on iOS until the user tries to scale with pinch/zoom.
* http://stackoverflow.com/questions/2557801/how-do-i-reset-the-scale-zoom-of-a-web-app-on-an-orientation-change-on-the-iphon
*/
if (navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i)) {
var viewportmeta = document.querySelector('meta[name="viewport"]');
if (viewportmeta) {
viewportmeta.content = 'width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0';
document.addEventListener('gesturestart', function () {
viewportmeta.content = 'width=device-width, minimum-scale=0.25, maximum-scale=10';
}, false);
}
}
</script>
6、输入数字时弹出只允许数字输入键盘
<input type="number" pattern="[0-9]*" />
pattern的用法都一样，这里不再啰嗦各种详细写法了，只是列出来一些常用的正则就好了：
信用卡 [0-9]{13,16}
银联卡 ^62[0-5]\d{13,16}$
Visa: ^4[0-9]{12}(?:[0-9]{3})?$
万事达：^5[1-5][0-9]{14}$
QQ号码： [1-9][0-9]{4,14}
手机号码：^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$
身份证：^([0-9]){7,18}(x|X)?$
密码：^[a-zA-Z]\w{5,17}$ 字母开头，长度在6~18之间，只能包含字母、数字和下划线
强密码：^(?=.\d)(?=.[a-z])(?=.*[A-Z]).{8,10}$ 包含大小写字母和数字的组合，不能使用特殊字符，长度在8-10之间
7个汉字或14个字符：^[\u4e00-\u9fa5]{1,7}$|^[\dA-Za-z_]{1,14}$
