移动端常用适配方案-界面自动跳转

malong1992 2021-08-26 原文

/*
1.如何实现PC端一套代码,移动端一套代码,
在PC端打开自动打开PC端界面
在移动端打开自动打开移动端界面

2.实现步骤:
2.1默认打开PC端界面
2.2在PC端界面中通过BOM拿到当前浏览器信息
2.3通过正则判断当前浏览器是否是移动端浏览器
2.4通过BOM的location对象实现跳转到移动端界面
* */

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>移动端常用适配方案-界面自动跳转</title>
</head>
<body>
<script>
    
    /*
    PC:     Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Safari/537.36
    移动端: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1
    移动端: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.86 Mobile Safari/537.36
    * */
    // let userAgentInfo = navigator.userAgent;
    // console.log(userAgentInfo);
    function isPc() {
        let userAgentInfo = navigator.userAgent;
        if(/iphone/i.test(userAgentInfo)){
            return false;
        }else if(/android/i.test(userAgentInfo)){
            return false;
        }
        return true;
    }
    if(!isPc()){
        location.href = "http://m.jd.com";
    }
</script>
</body>
</html>

　　效果:点击在移动端展示