最近工作遇到一个问题，就是点击按钮通过判断不同设备跳转页面...问题主要是在苹果设备上有点无奈，下面是一个简单的例子~
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");
}
}
页面效果如下：
