思路:
1.系统登录进来时判断是移动端还是PC端
2.如果是移动端的话将最外层的div进行缩放,反之,则不缩放
我自己是根据屏幕的宽度来进行缩放的,先自定义宽高比,再获取浏览器宽度,将获取的宽度与自己设定的宽度相比,得到缩放比,主要代码:
let w = document.documentElement.clientWidth;
let h = document.documentElement.clientHeight;
let scale = {
//屏幕缩放
sizeScale: () => {
//固定宽高及比
let fixed_wh = { w: 1280, h: 609, r: 1280 / 609 };
let ratio = w / fixed_wh.w;
return ratio;
},
//是否是移动端
isMobile: () => {
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
return flag
},
//是否是横屏
isOrientation: () => {
let screen = false;
if (w < h) { //竖屏
screen = true
}
return screen;
},
isScale:()=> {
let ismobile = scale.isMobile();
let rscale = scale.sizeScale();
let isclass = false;
if (ismobile === null) {
isclass = false;
return { r: 1, c: isclass };
} else {
isclass = true;
return { r: rscale, c: isclass };
}
}
}
export default scale