1 创建主屏幕图标 (Creating a home screen icon ,for ios)

 
1
2
3
4
5
6
//57*57
<link rel="apple-touch-icon"href="http://wlog.cn/html/"/custom_icon.png"/>
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />
<link rel="apple-touch-icon" sizes="144x144" href="touch-icon-ipad-retina.png" />

启动画面图像 (Creating a splash screen, for ios)

 
1
2
3
4
5
6
7
8
9
10
11
12
<!!-- iPhone SPLASHSCREEN-->
<!link href="http://wlog.cn/html/"apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!!-- iPhone (Retina) SPLASHSCREEN-->
<!link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!!-- iPad (portrait) SPLASHSCREEN-->
<!link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!!-- iPad (landscape) SPLASHSCREEN-->
<!link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
<!!-- iPad (Retina, portrait) SPLASHSCREEN-->
<!link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!!-- iPad (Retina, landscape) SPLASHSCREEN-->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

3 全屏 (Making it full-screen, for ios)– 更像本地App

 
1
<meta name="apple-mobile-web-app-capable"content="yes" />

4 改变状态栏 (Changing the phone status bar, for ios)
content属性default, black and black-translucent

 
1
<meta name="apple-mobile-web-app-status-bar-style"content="black" />

5 阻止缩放 (Preventing scaling)

 
1
<meta name="viewport"content="user-scalable=no, width=device-width" />

6 阻止弹性滚动(Preventing elastic scrolling)

 
1
2
3
4
5
6
7
8
9
<script>
functionBlockMove(event){
    //Tell Safari not to move the window.
    event.preventDefault();
}
</script>
<body ontouchmove="BlockMove(event);">
  ...
</body>

7 检测屏幕是否旋转(Detect whether device supports orientationchange event, otherwise fall back to the resize event)

 
1
2
3
4
5
6
7
//Detect whether device supports orientationchange event, otherwise fall back to
//the resize event.
varsupportsOrientationChange="onorientationchange"inwindow,
    orientationEvent=supportsOrientationChange?"orientationchange":"resize";
window.addEventListener(orientationEvent,function(){
    alert('HOLY ROTATING SCREENS BATMAN:'+window.orientation+" "+screen.width);
},false);

8 禁止webapp跳转到safari(for ios)

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Mobile Safari in standalone mode
if(("standalone"inwindow.navigator)&&window.navigator.standalone){
        // If you want to prevent remote links in standalone web apps opening Mobile Safari, change 'remotes' to true
    varnoddy,
        remotes=false;
    document.addEventListener('click',function(event){
        noddy=event.target;
        //Bubble up until we hit link or top HTML element. Warning: BODY element is not compulsory so better to stop on HTML
        while(noddy.nodeName!=="A"&&noddy.nodeName!=="HTML"){
            noddy=noddy.parentNode;
        }
        if('href'innoddy&&noddy.href.indexOf('http')!==-1&&(noddy.href.indexOf(document.location.host)!==-1||remotes)){
            event.preventDefault();
            document.location.href=noddy.href;
        }
    },false);
}

9 禁用手机号码链接(for ios)

 
1
<meta name="format-detection"content="telephone=no"/>

10 阻止旋转屏幕时自动调整字体大小

 
1
-webkit-text-size-adjust:none;

11 IOS中禁止用户选中文字

 
1
-webkit-user-select:none;

12 iOS中如何禁止用户保存图片 复制图片

 
1
-webkit-touch-calloutt:none;

13 语音输入

 
1
<input type="text"x-webkit-speech />

14 文件上传, 从相机捕获媒体

 
 
 
 
 

XHTML

 
1
2
3
<input type="file"accept="image/*; capture=camera" />
<input type="file"accept="video/*; capture=camcorder" />
<input type="file"accept="audio/*; capture=microphone" />

15 电话短信

 
1
2
3
<a href="http://wlog.cn/html/"sms:18888886666,18888885555″]]> 发送短信给多个人 的链接
<a href="sms:18888886666?body=sms txt"]]> 发送短信附带内容 的链接
<a href="tel:18888886666″]]>Call us at 18888886666</a]]>拨打电话的链接

移动web app开发小贴士 收藏有用的更多相关文章

  1. web移动开发小贴士

    1.判断手机类型 var u = navigator.userAgent; || u.indexOf(; //android var isiOS = !!u.match(/\(i[^;]+;( U;) ...

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

随机推荐

  1. 22.整数二进制表示中1的个数[Get1BitCount]

    [题目] 输入一个整数,求该整数的二进制表达中有多少个1.例如输入10,由于其二进制表示为1010,有两个1,因此输出2. [分析] 如果一个整数不为0,那么这个整数至少有一位是1.如果我们把这个整数 ...

  2. 【转】maven导出项目依赖的jar包

    本文转自:http://my.oschina.net/cloudcoder/blog/212648 一.导出到默认目录 targed/dependency 从Maven项目中导出项目依赖的jar包:进 ...

  3. 低配置电脑播放 flash 视频时 占 cpu 资源过高的解决方法

    安装低版本的 flash player 版本, 经调试能满足播放的最低版本是 Flash Player 10.3.183.90 然后 firefox 3.6.28 + Adblock Plus 2.0 ...

  4. Java for LeetCode 030 Substring with Concatenation of All Words【HARD】

    You are given a string, s, and a list of words, words, that are all of the same length. Find all sta ...

  5. UITableView:下拉刷新和上拉加载更多

    [转载请注明出处] 本文将说明让UIScrollView支持"下拉刷新"和"上拉加载更多"的实现机制,并实现一个可用的tableView子类,以下主要以&quo ...

  6. OpenGL在 win8 64bits系统下的配置

    1 program files(x86)与program files 在64位系统下,为了更好的兼容32位程序,在安装一些32位程序(注意某些程序他就是32位的),会默认扔到program files ...

  7. 关于Java异常和错误的几个问题

    1.Java中什么是Exception? 异常是Java传达给你的系统和程序错误的方式. 在java中,异常功能是通过实现比如Throwable,Exception,RuntimeException之 ...

  8. Android 利用日志消息调试程序

    Log类提供了下面几个静态方法 , Log.e():  错误: Log.w():  警告: Log.i():   信息: Log.d();   调试: Log.v();   详细:

  9. P and V

    上次,我们已经说过死锁的形成原因以及防止方法了,都知道,之所以会发生死锁现象,原因之一是进程执行所申请的资源得不到满足,而陷入无限期的循环等待现象,而在这里我们说的进程其实是并发进程,也就是一组,至少 ...

  10. Spark服务启动的一些总结

    1.我理解常用的Spark部署方式有三种 1).本地服务,就是所谓的local,在IDE上本地跑程序,用于调试 2).Standalone,使用自己的master/worker进行服务的调度.  脱离 ...