vue对手机号的判断_VUE 判断电脑还是手机设备 pc端自适应 移动端rem布局

pc端所有的页面和移动端都写在一个项目里

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

可以写在一个js文件里,然后在main.js里统一引入

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

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

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

});

}

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

Powered By Z-BlogPHP 1.7.3

Copyright www.122dh.com Rights Reserved.