VUE 判断电脑还是手机设备 pc端自适应 移动端rem布局

我的需求是 pc端所有的页面和移动端的登录页,首页 都写在一个项目里

这时候就需要我在登录的时候判断是什么设备 然后跳到相应的页面 采用不同的样式

如果是手机端的话 我要采用rem布局 设计稿是640px的标准 

这是移动端rem布局 1rem=100px

如果是pc端的话 我需要页面自适应 设计稿是宽1920px的标准 并且当电脑屏幕尺寸小于1024px(一般来讲最小的电脑尺寸就是1024px),就不让页面继续缩小了 否则样式错乱,影响用户体验.

把这张图片的代码全部粘贴 作为一个单独的js文件引入 完美自适应屏幕大小

这个是我要对设备进行判断

这行代码是判断pc登陆还是手机端登录

下面放上所有代码 方便大家使用 希望可以对大家有帮助! 

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))) {

        // alert('手机端')

        var abc = document.documentElement.clientWidth;

        var bl = abc/640//设计稿的宽度

        var fontSize = 100*bl

        document.documentElement.style.fontSize = fontSize + "px"

     }else{

        //  alert('PC端')

        var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值

        var wH = window.innerHeight; // 当前窗口的高度

        var wW = window.innerWidth; // 当前窗口的宽度

        var rem

        if(wW <= 1024) {

            rem = 1024 * whdef;

        } else {

            rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

        }

        $('html').css('font-size', rem + "px");

        $(window).resize(function() // 绑定到窗口的这个事件中

            {

                var whdef = 100 / 1920; // 表示1920的设计图,使用100PX的默认值

                var wH = window.innerHeight; // 当前窗口的高度

                var wW = window.innerWidth; // 当前窗口的宽度

                if(wW <= 1024) {

                    rem = 1024 * whdef;

                } else {

                    rem = wW * whdef; // 以默认比例值乘以当前窗口宽度,得到该宽度下的相应FONT-SIZE值

                }

                $('html').css('font-size', rem + "px");

                // var H = document.documentElement.scrollHeight;

                // $('html').height(H);

            });

     }

喜欢的话 点个小心心哦!