浏览器网页判断手机是否安装IOS/Android客户端程序

IOS

原理如下：

为HTML页面中的超链接点击事件增加一个setTimeout方法。

如果在iPhone上面500ms内，本机有应用程序能解析这个协议并打开程序，则这个回调方法失效；

如果本机没有应用程序能解析该协议或者500ms内没有打开个程序，则执行setTimeout里面的function，就是跳转到apple的itunes。

<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<h2><a id="applink1" href="mtcmtc://profile/116201417">Open scheme(mtcmtc) defined in iPhone with parameters </a></h2>
<h2><a id="applink2" href="unknown://nowhere">open unknown with fallback to appstore</a></h2>
<p><i>Only works on iPhone!</i></p>
<script type="text/javascript">
// To avoid the "protocol not supported" alert, fail must open another app.
var appstore = "itms://itunes.apple.com/us/app/facebook/id284882215?mt=8&uo=6";
function applink(fail){
return function(){
var clickedAt = +new Date;
// During tests on 3g/3gs this timeout fires immediately if less than 500ms.
setTimeout(function(){
// To avoid failing on return to MobileSafari, ensure freshness!
if (+new Date - clickedAt < 2000){
window.location = fail;
}
}, 500);
};
}
document.getElementById("applink1").onclick = applink(appstore);
document.getElementById("applink2").onclick = applink(appstore);
</script>
</body>
</html>

Android

同样的原理来处理android的javascript跳转，发现如果本机没有程序注册intent-filter for 这个协议，那么android内置的browser就会处理这个协议并且立即给出反应(404，你懂的)，不会像iPhone一样去执行 setTimeout里面的function，即便你把500ms改成0ms也不管用。

在AndroidManifest.xml文件中对应Activity中添加如下intent-filter配置：
<activity
android:name=".ui.welcome.WelcomeActivity"
android:screenOrientation="portrait"
android:theme="@android:style/Theme.NoTitleBar" >
</activity>

对应HTML页面中指向改应用程序Activity的HyperLink超链接：
<a id="applink1" href="toutou://www.toutout.com/mi-tracker-web/download.html">Open Application</a> 
优化处理：
可以配置html的scheme和host以及port、path等为类似如下格式：

http://192.168.167.33:8088/mi-tracker-web/download.html

浏览器在访问这个超链接时，如果手机没有安装相应app，可以设置自动重定向到如下download.jsp（Web Service知识）：
<html>
<head>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<a id="applink1" href="market://details?id=com.toutouunion">Open Application</a>
</html>  

通过market协议，自动跳转至手机应用商店（前提是手机必须安装有应用商店相关的APP软件）。参考博文：Android Market链接的生成

微信浏览器

由于在微信里面打开网页，会屏蔽掉网页里面的app启动事件，同时也屏蔽掉app的下载链接，导致用户无法判断本地是否安装有相应app或者启动本地app，以及正常下载app的功能，解决方案有两个：

一：提示用户使用手机浏览器打开网页

测试案例二维码：

效果如下：

技术分享

Js实现的部分源代码：

function is_weixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
return true;
} else {
return false;
}
}
var browser={
versions:function(){
var u = navigator.userAgent, app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1,
presto: u.indexOf('Presto') > -1,
webKit: u.indexOf('AppleWebKit') > -1,
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
mobile: !!u.match(/AppleWebKit.*Mobile.*/),
ios: !!u.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
iPhone: u.indexOf('iPhone') > -1 ,
iPad: u.indexOf('iPad') > -1,
webApp: u.indexOf('Safari') == -1
}
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
};
function init(){
if(is_weixin()){
//weixin为提示使用浏览器打开的div
document.getElementById("weixin").style.display="block";
if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
document.getElementById("step2").innerHTML="2. 在Safari中打开";
}else{
document.getElementById("step2").innerHTML="2. 在浏览器中打开";
}
}else{
//下载页div
document.getElementById("main").style.display="block";
}
}
init();

二：交由应用宝处理

申请应用宝合作，依据应用宝提供的下载链接，跳转至应用宝界面，再点击下载，应用宝会依据手机设备的不同决定跳转至App store或者安卓应用宝的相应下载页面。

应用宝开放平台提供的app下载链接地址格式为：http://a.app.qq.com/o/simple.jsp?pkgname=your package name

如：http://a.app.qq.com/o/simple.jsp?pkgname=com.feng.dota