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

iPad web APP 开发相关的更多相关文章

  1. App.js – 用于移动 Web App 开发的 JS 界面库

    App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...

  2. 微信公众平台开发:Web App开发入门

    WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...

  3. 前端读者 | Web App开发入门

    本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...

  4. 手机web app开发笔记

    各位朋友好,最近自学开发了一个手机Web APP,“编程之路”,主要功能包括文章的展示,留言,注册登录,音乐播放等.为了记录学习心得,提高自己的编程水平,也许对其他朋友有点启发,特整理开发笔记如下. ...

  5. 移动web app开发必备 - 异步队列 Deferred

    背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...

  6. 移动web app开发必备 - Deferred 源码分析

    姊妹篇  移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...

  7. web app 开发必不可少的滑动插件 Flipsnap

    flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...

  8. 移动端web app开发学习笔记

    移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...

  9. Native App开发 与Web App开发(原生与web开发优缺点)

    Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...

随机推荐

  1. 【转】常用Maven插件

    我们都知道Maven本质上是一个插件框架,它的核心并不执行任何具体的构建任务,所有这些任务都交给插件来完成,例如编译源代码是由maven- compiler-plugin完成的.进一步说,每个任务对应 ...

  2. hdu 4123--Bob’s Race(树形DP+RMQ)

    题目链接 Problem Description Bob wants to hold a race to encourage people to do sports. He has got troub ...

  3. 【BZOJ】1015 [JSOI2008]星球大战starwar(并查集+离线处理)

    Description 很久以前,在一个遥远的星系,一个黑暗的帝国靠着它的超级武器统治者整个星系.某一天,凭着一个偶然的机遇,一支反抗军摧毁了帝国的超级武器,并攻下了星系中几乎所有的星球.这些星球通过 ...

  4. Musical Theme poj1743(后缀数组)

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 16757   Accepted: 5739 De ...

  5. MySQL show status 参数详解

    状态名 作用域 详细解释 Aborted_clients Global 由于客户端没有正确关闭连接导致客户端终止而中断的连接数 Aborted_connects Global 试图连接到MySQL服务 ...

  6. myeclipse的快捷键

    ------------------------------------MyEclipse 快捷键1(CTRL)-------------------------------------Ctrl+1 ...

  7. DotNetCore跨平台~一起聊聊Microsoft.Extensions.DependencyInjection

    写这篇文章的心情:激动 Microsoft.Extensions.DependencyInjection在github上同样是开源的,它在dotnetcore里被广泛的使用,比起之前的autofac, ...

  8. Java高新技术 JavaBean内省

     Java高新技术  JavaBean内省 知识概要:                 (1)了解JavaBean内省                 (2)JavaBean的简单内省操作     ...

  9. canvas图表详解系列(1):柱状图

    本章建议学习时间4小时 学习方式:详细阅读,并手动实现相关代码(如果没有canvas基础,需要先学习前面的canvas基础笔记) 学习目标:此教程将教会大家如何使用canvas绘制各种图表,详细分解步 ...

  10. WebApi实现自定义错误日志

    一.Mvc错误处理默认有添加HandleErrorAttribute默认的过滤器,但是我们有可能要捕捉这个错误并记录系统日志那么这个过滤器就不够用了,所以我们要自定义Mvc及Web Api各自的错误处 ...