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}$