移动web app开发小贴士 收藏有用
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开发小贴士 收藏有用的更多相关文章
- web移动开发小贴士
1.判断手机类型 var u = navigator.userAgent; || u.indexOf(; //android var isiOS = !!u.match(/\(i[^;]+;( U;) ...
- 移动web app开发必备 - Deferred 源码分析
姊妹篇 移动web app开发必备 - 异步队列 Deferred 在分析Deferred之前我觉得还是有必要把老套的设计模式给搬出来,便于理解源码! 观察者模式 观察者模式( 又叫发布者-订阅者模 ...
- 微信公众平台开发:Web App开发入门
WebApp与Native App有何区别呢?Native App:1.开发成本非常大.一般使用的开发语言为JAVA.C++.Objective-C.2.更新体验较差.同时也比较麻烦.每一次发布新的版 ...
- 移动端web app开发学习笔记
移动web和pc端web以及web app 移动web开发跟web前端开发差别很小,使用的技术都是html+css+js.手机网页可以理解成pc网页的缩小版加一些触摸特性.在浏览器中进行的网页开发,最 ...
- Native App开发 与Web App开发(原生与web开发优缺点)
Native App开发 Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS.Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是 ...
- 前端读者 | Web App开发入门
本文来自互联网 自Iphone和Android这两个牛逼的手机操作系统发布以来,在互联网界从此就多了一个新的名词 - Web App(意为基于WEB形式的应用程序).业界关于Web App与Nativ ...
- 移动web app开发必备 - 异步队列 Deferred
背景 移动web app开发,异步代码是时常的事,比如有常见的异步操作: Ajax(XMLHttpRequest) Image Tag,Script Tag,iframe(原理类似) setTimeo ...
- App.js – 用于移动 Web App 开发的 JS 界面库
App.js 是一个轻量级的 JavaScript UI 库,用于创建像本地应用程序的移动 Web 应用而不牺牲性能和体验.它是跨平台的,特定的UI设计,配置类似原生的过渡效果.App.js 的目的是 ...
- web app 开发必不可少的滑动插件 Flipsnap
flipsnap.js一个轻量级的滑动效果JS开发库,仅有8k大小(压缩版),包含了10种滑动方式,是web app开发必备的js库,除了兼容主流的智能手机浏览器(iossafari,android, ...
随机推荐
- 22.整数二进制表示中1的个数[Get1BitCount]
[题目] 输入一个整数,求该整数的二进制表达中有多少个1.例如输入10,由于其二进制表示为1010,有两个1,因此输出2. [分析] 如果一个整数不为0,那么这个整数至少有一位是1.如果我们把这个整数 ...
- 【转】maven导出项目依赖的jar包
本文转自:http://my.oschina.net/cloudcoder/blog/212648 一.导出到默认目录 targed/dependency 从Maven项目中导出项目依赖的jar包:进 ...
- 低配置电脑播放 flash 视频时 占 cpu 资源过高的解决方法
安装低版本的 flash player 版本, 经调试能满足播放的最低版本是 Flash Player 10.3.183.90 然后 firefox 3.6.28 + Adblock Plus 2.0 ...
- 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 ...
- UITableView:下拉刷新和上拉加载更多
[转载请注明出处] 本文将说明让UIScrollView支持"下拉刷新"和"上拉加载更多"的实现机制,并实现一个可用的tableView子类,以下主要以&quo ...
- OpenGL在 win8 64bits系统下的配置
1 program files(x86)与program files 在64位系统下,为了更好的兼容32位程序,在安装一些32位程序(注意某些程序他就是32位的),会默认扔到program files ...
- 关于Java异常和错误的几个问题
1.Java中什么是Exception? 异常是Java传达给你的系统和程序错误的方式. 在java中,异常功能是通过实现比如Throwable,Exception,RuntimeException之 ...
- Android 利用日志消息调试程序
Log类提供了下面几个静态方法 , Log.e(): 错误: Log.w(): 警告: Log.i(): 信息: Log.d(); 调试: Log.v(); 详细:
- P and V
上次,我们已经说过死锁的形成原因以及防止方法了,都知道,之所以会发生死锁现象,原因之一是进程执行所申请的资源得不到满足,而陷入无限期的循环等待现象,而在这里我们说的进程其实是并发进程,也就是一组,至少 ...
- Spark服务启动的一些总结
1.我理解常用的Spark部署方式有三种 1).本地服务,就是所谓的local,在IDE上本地跑程序,用于调试 2).Standalone,使用自己的master/worker进行服务的调度. 脱离 ...