PC 端 与手机wap 之间的自适应切换

问题遇到的现象和发生背景

怎样解决PC端 和 wap 手机端的切换 项目是用html5和css/js 做的,并且代码是同一套代码,要求配置 m. 站点,做到 www. 和 m. 之间的切换

用代码块功能插入代码,请勿粘贴截图
<script>
        function detectmob() {
            if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)) {
                // window.location.href = "https://m.assist.re.k";
                console.log('123');
            } else {
               
                // window.location.href = "https://wwww.assist.re.k";
                console.log('123456');
            }
        }
        detectmob()
    </script>
运行结果及报错内容

控制台打印可以转换,但转换成网页时,m.网址不显示内容 (m网址是不是要后端去配置站点,我是直接写的网址名字)

我的解答思路和尝试过的方法

大多数解决方案是先判断是否是手机wap端,是就跳转,不是就跳转PC端,但项目不是vue做的,解决方案较少

我想要达到的结果

同一套代码实现 PC 到手机wap 端 的跳转

首先vue项目里面也是能运行原生js代码的,你现在的代码实现思路是没问题,前提是你要保证https://m.assist.re.k
是能直接访问的,如果访问不到,那你跳转过去不就是无用功吗

然后你在Vue里面应该如果兼容了pc和手机端的样式,那就不用再做其他的了,

第一步:你先保证这两个地址都能访问到内容https://wwww.assist.re.k,https://m.assist.re.k
第二步:这两个链接指向的资源地址都是你的项目地址,或者,你在服务器上建立两个文件夹,但是代码都是一套

$(function(){
    // console.log(navigator.userAgent);
    var os = function (){
      var ua = navigator.userAgent,
      isWindowsPhone = /(?:Windows Phone)/.test(ua),
      isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
      isAndroid = /(?:Android)/.test(ua),
      isFireFox = /(?:Firefox)/.test(ua),
      isChrome = /(?:Chrome|CriOS)/.test(ua),
      isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
      isPhone = /(?:iPhone)/.test(ua) && !isTablet,
      isPc = !isPhone && !isAndroid && !isSymbian;
      return {
          isTablet: isTablet,
          isPhone: isPhone,
          isAndroid: isAndroid,
          isPc: isPc
      };
  }();
  
  if (os.isAndroid || os.isPhone) {
    alert("手机)
  } else if (os.isTablet) {
    // console.log("平板")
  } else if(os.isPc) {
    // console.log("电脑")
  }
});

这个和是不是vue没多大直接关系,直接js判断下是否是手机,是就重定向,也就几句代码的事情,前端后台代码都可以做到

比如js判断(适配了比较常见的几种)

//判断浏览器类型
const isMobile = () => {
    return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|baiduboxapp/i.test(navigator.userAgent);
}

if(isMobile ()){
//跳转手机端
}else{
//pc端
}

是的,需要两个站点,两个地址是不同的