首页 > 移动平台 > 详细

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

时间:2020-05-27 22:01:27      阅读:57      评论:0      收藏:0      [点我收藏+]
/*
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>

  效果:点击在移动端展示

技术分享图片

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

原文:https://www.cnblogs.com/malong1992/p/12976786.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!