一個比較完整的產品線，必定有APP和網站，另外還有微信公眾號網頁和小程式。那麼有一個比較常見的需求就是在手機瀏覽器內開啟APP，實現起來也比較簡單，只要APP配置的有URLScheme即可。但是因為無法判斷是否安裝APP，所有隻能嘗試去開啟APP，如果打不開則跳轉到APP下載頁面。另外手機瀏覽器的型別很多，各個瀏覽器顯示的效果也不一樣，一直無法找到一個完全相容所有瀏覽器的方法，沒有完美的解決方案。

　　開啟APP的操作就是連結開啟 location.href = "scheme://"，APP未安裝的時候連結開啟有的時候會跳轉到錯誤頁面，所以可以使用iframe來跳轉，保證瀏覽器連結一直在當前頁面 document.querySelector("#iframeId").src = "scheme://"，開啟APP大部分手機瀏覽器會彈窗是否允許跳轉開啟。

　　開啟APP失敗時跳轉到下載，因為無法判斷開啟是否成功，所以通過setTimeout兩秒後跳轉下載地址。下載地址ios：https://itunes.apple.com/cn/app/要跳轉的APP的appid，安卓下載地址自定義即可，放到自己的伺服器地址上邊，瀏覽器開啟.apk地址自動提示下載。

測試了流行的幾個手機瀏覽器，總結一下需要注意以下幾點：

　　1. 微信公眾號網頁開啟APP，微信已經開放了介面，在微信開放平臺配置域名程式碼裡面新增按鈕後即可跳轉，小程式開啟APP也有相關文件說明。https://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html

　　2. 安卓下的谷歌瀏覽器無法通過iframe的方式開啟，必需使用location.href。

　　3. 手機百度瀏覽器不支援開啟APP，這個是百度自己的問題，不允許開啟APP。另外百度瀏覽器中頁面的按鈕文字含有“下載”或“開啟”的時候，按鈕會被百度給隱藏掉（好霸道），所以只能換下文字或者加空格“下 載”“打 開”。

　　4. UC瀏覽器頁面初始化後直接通過js開啟APP打開不了，需要點選實際的按鈕觸發開啟。

最終實現的方式如下：

1. 通過js判斷瀏覽器型別

　　var Navigator = navigator.userAgent;

　　var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false; //判斷是不是谷歌瀏覽器

　　var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false; //判斷是不是安卓

　　var ifIos = /(iPhone|iPad|iPod|iOS)/i.test(Navigator); //判斷是不是ios

　　var ifUCorBaidu = /(UCBrowser|baiduboxapp)/i.test(Navigator); //判斷是不是UC或百度瀏覽器

　　var openUrl = "scheme://";

　　var androidDownUrl = "https://xxx/1.0.0.apk";

　　var iosDownUrl = "https://itunes.apple.com/cn/app/要跳轉的APP的appid";

2. 分別操作

<div class="buttons" @click="openApp">{{text}}</div>

<iframe id="myDown" style="width: 1px;height: 1px;position: absolute;z-index: -1;top:10px"></iframe>

if(ifUCorBaidu) {

　　this.text = '點 擊 下 載 APP';

} else {

　　this.text = '正在跳轉中';

　　openApp();

} //這裡使用了vue，也可以用其他方式修改按鈕文字

function openApp() {

window.onblur = function() {

　　if(myTimeout) {
　　　　clearTimeout(myTimeout);
　　}
}; //onblur可以檢測到頁面消失，這時候一般已經打開了APP，就清除掉下載定時器，不跳出下載連結。

if (ifIos) {
　　if(ifUCorBaidu) {
　　　　window.location.href = iosDownUrl; //ios跳到App Store也可以開啟APP，所以直接開啟就好了。
　　} else {
　　　　window.location.href = openUrl;
　　　　var myTimeout = setTimeout(function () {
　　　　　　window.location.href = iosDownUrl;
　　　　}, 1000);
　　} else{

　　　　if(ifChrome && ifAndroid) {
　　　　　　setTimeout(function() {
　　　　　　　　window.location.href = openUrl;
　　　　　　}, 50)
　　　　} else {
　　　　　　document.querySelector("#myDown").src = openUrl;
　　　　}
　　　　var loadDateTime = Date.now();
　　　　setTimeout(function() {
　　　　　　var myTimeout = setTimeout(function() {
　　　　　　var timeOutDateTime = Date.now();
　　　　　　if (loadDateTime && (timeOutDateTime - loadDateTime) < (1500 + 200)) {
　　　　　　　　　　window.location.href = androidDownUrl
　　　　　　　　} //這裡的操作跟直接setTimeout是一樣的
　　　　　　}, 1500);
　　　　}, 100)
　　}

}

}

經過測試 百度瀏覽器，QQ瀏覽器，UC瀏覽器，360瀏覽器，搜狗瀏覽器，夸克瀏覽器，Safari瀏覽器效果都還算理想。

歡迎討論，如果有更完美的方案可以告訴我以完善程式碼。