js根据不同设备进行页面跳转

来源：互联网发布：查询的sql语句编辑：程序博客网时间：2024/05/21 15:51

最近工作遇到一个问题，就是点击按钮通过判断不同设备跳转页面...问题主要是在苹果设备上有点无奈，下面是一个简单的例子~

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"></head><body><div id="pageBox">    <div class="contentTop">        <span>O(∩_∩)O哈哈哈~</span>    </div>    <div class="contentBottom">        <a onclick="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");    }}

页面效果如下：

0 0