关于设备不同加载不同的页面

Question

场景：

现有一个纯html写的pc网页， 和一个 vue写的移动端网页， 经理想只用一个域名 实现 两个网页的切换，就是
当用户用电脑访问的时候 加载pc端，用手机访问时 加载移动端。 

提问：

如何根据设备不同，进行优雅的页面切换？

Answer 1

js判断，如果是手机设备则跳转到 手机站点，如果是pc设备则不跳转；

        var sUserAgent = navigator.userAgent.toLowerCase();
        var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
        var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
        var bIsMidp = sUserAgent.match(/midp/i) == "midp";
        var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
        var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
        var bIsAndroid = sUserAgent.match(/android/i) == "android";
        var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
        var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";

        if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {//如果是上述设备就会以手机域名打开
                window.location.href = 'mobile地址';
        }

Answer 2

最好是后端根据请求中的 ua 判断，然后返回不同的页面。
前端最好不要做这个判断和跳转。