移动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, ...
随机推荐
- codeforces 485A.Factory 解题报告
题目链接:http://codeforces.com/problemset/problem/485/A 题目意思:给出 a 和 m,a 表示第一日的details,要求该日结束时要多生产 a mod ...
- javascript 中string 型数据转换成int类型
var str1 = "1234";var str2 = "1234";number = parseInt(str1); number就是int型 str1+s ...
- Babelfish(poj 2503)
大致题意: 输入一个字典,字典格式为“英语à外语”的一一映射关系 然后输入若干个外语单词,输出他们的 英语翻译单词,如果字典中不存在这个单词,则输出“eh” #include<iostream& ...
- 前端代理nproxy
一.场景/用途 前端代理的用途,相信大家都清楚.应用场景很多,如—— . 将线上的静态资源文件(JS.CSS.图片)替换为本地相应的文件,来调试线上(代码都被压缩过)的问题: . 本地开发过程,当后端 ...
- caffe 无GPU 环境搭建
root@k-Lenovo:/home/k# sudo apt-get install libprotobuf-dev libleveldb-dev libsnappy-dev libopencv-d ...
- 使用HttpClient操作ASP.NET Web API 2.1增删改查
使用NuGet包安装Microsoft ASP.NET Web API 2.1 Client Libraries, 调用方式代码如下: HttpClient client = new HttpClie ...
- hdu 4292 最大流 水题
很裸的一道最大流 格式懒得排了,注意把人拆成两份,一份连接食物,一份连接饮料 4 3 3 //4个人,3种食物,3种饮料 1 1 1 //食物每种分别为1 1 1 1 //饮料每种数目分别为1 YYN ...
- C#学习笔记(四)——变量的更多内容
一.类型转换 1.转换的类型 2.隐式转换 bool 和string 没有隐式转换,具有隐式转换的都列在下面的表格 . 记住一个规律,就是由精度低的类型转到精度高的类型是很容易的. 3.显式转换 (1 ...
- 《大话》之第三者家族 代理 Vs 中介者
前两天,有个同学突然问我说:"我感觉代理模式和中介者模式不好区分,你能给我讲讲吗?" 刚开始还没敢张嘴,因为他突然一问,我貌似也不知道,经过整理,现在将结果贴出来,请大家共享 代理 ...
- 在js里面使用php语言