最近工作遇到一個問題，就是點選按鈕通過判斷不同裝置跳轉頁面...問題主要是在蘋果裝置上有點無奈，下面是一個簡單的例子~
test.html部分
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>js判斷不同裝置</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<link rel="stylesheet" type="text/css" href="test.css" target="_blank" rel="external nofollow" >
</head>
<body>
<div id="pageBox">
<div class="contentTop">
<span>O(∩_∩)O哈哈哈~</span>
</div>
<div class="contentBottom">
<a οnclick="downApp()" id="downBtn">一鍵跳轉</a>
</div>
</div>
</body>
<script type="text/javascript" src="bootstrap/jquery-2.1.4.min.js"></script>
<script type="text/javascript" src="test.js"></script>
</html>
test.css樣式部分：
*{
box-sizing: border-box;
}
html,body{
margin: 0;
padding: 0;
}
html{
font-size: 40px;
height: 100%;
background-color: #282828;
}
body{
overflow-x: hidden;
overflow-y: auto;
color: #000;
font-size: .7rem;
font-family: "\5FAE\8F6F\96C5\9ED1",Helvetica,"黑體",Arial,Tahoma;
height: 100%;
}
ul{
padding: 0;
margin: 0;
}
li{
list-style: none;
}
#pageBox{
background: #fff;
overflow-x: hidden;
margin: 0 auto;
max-width: 640px;
left: 0;
top: 0;
overflow-x: hidden;
width: 100%;
min-height: 100%;
}
#pageBox .contentTop, #pageBox .contentBottom{
width: 100%;
}
#pageBox .contentTop{
text-align: center;
vertical-align: middle;
background-color: #202020;
color: #ccc;
}
#pageBox .contentBottom{
background-color: #fff;
padding-top: 1.25rem;
}
#downBtn{
display: block;
width: 80%;
margin: 0 auto;
/* margin-top: 1.25rem; */
height: 1.5rem;
line-height: 1.5rem;
border-radius: .125rem;
background-color: #DE034E;
color: #fff;
text-align: center;
cursor: pointer;
}
test.js關于js部分：
$(document).ready(function() {
deviceScreen();
});
/*
裝置寬度
*/
function deviceScreen(){
screenW = window.screen.width;
screenH = document.body.clientHeight;
//alert(screenW);
if(screenW<=640){
$("html").css("font-size",screenW/16)
$("#pageBox .contentTop").css({
"height":((screenH*6)/10)/(screenW/16)+"rem",
"line-height":((screenH*6)/10)/(screenW/16)+"rem"
});
$("#pageBox .contentBottom").css("height",((screenH*4)/10)/(screenW/16)+"rem");
}else{
$("html").css("font-size","40px")
$("#pageBox .contentTop").css({
"height":((screenH*6)/10)/40+"rem",
"line-height":((screenH*6)/10)/40+"rem"
});
$("#pageBox .contentBottom").css("height",((screenH*4)/10)/40+"rem");
}
}
/*
* 一鍵下載下傳用戶端
*/
function downApp(){
var browser = {
versions:function(){
var u = navigator.userAgent;
var app = navigator.appVersion;
return{//移動終端浏覽器版本資訊
trident: u.indexOf('Trident') > -1, //IE核心
presto: u.indexOf('Presto') > -1, //opera核心
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/), //ios終端
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android終端或者uc浏覽器
iPhone: u.indexOf('iPhone') > -1, //是否為iPhone或者QQHD浏覽器
iPad: u.indexOf('iPad') > -1, //是否iPad
webApp: u.indexOf('Safari') == -1, //是否web應用程式，沒有頭部和底部
weixin: u.indexOf('MicroMessenger') > -1, //是否微信
qq: u.match(/\sQQ/i) == " qq", //是否QQ
};
}(),
language:(navigator.browserLanguage || navigator.language).toLowerCase()
}
if(browser.versions.mobile || browser.versions.ios || browser.versions.android || browser.versions.iPhone || browser.versions.iPad){
if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
// alert("蘋果手機或ipad");
var winRef = window.open("");//打開一個新的頁面
function loc(){
alert();//這個alert不能不能省略，如果省略的話有些蘋果系統跳轉會失敗，就是winRef.location指派失敗
// var ll = 'https://itunes.apple.com/app/id1061880281';//這個連結是進入蘋果手機的App Store的連結，隻要更改後面的id值就可以了
var ll = 'http://www.runoob.com/try/try.php?filename=try_nav_all';
winRef.location = ll;//改變頁面的 location
}
setTimeout(loc(),8000);//這個等待很重要，如果不等待的話将無法實作
}else{
// alert("安卓手機");
window.open('http://blog.csdn.net/qq_29326717/article/details/56841063', "_blank");
}
}else{
// alert("PC端");
window.open('http://d.weibo.com/?topnav=1&mod=logo&wvr=6', "_blank");
}
}
頁面效果如下：
