rem.js
1.36 KB
function isMobile() {
let userAgentInfo = navigator.userAgent;
let Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod'];
let getArr = Agents.filter(i => userAgentInfo.includes(i));
console.log(getArr.length ? true : false)
return getArr.length ? true : false;
}
const baseSize = 12
// 设置 rem 函数
function setRem() {
if(!isMobile()){
document.documentElement.style.fontSize = baseSize * window.devicePixelRatio + 'px'
return
}
// 当前页面宽度相对于 1920宽的缩放比例,可根据自己需要修改。
const scale = Math.max(0, document.documentElement.clientWidth) / 375
// 设置页面根节点字体大小(“Math.min(scale, 2)” 指最高放大比例为2,可根据实际业务需求调整)
document.documentElement.style.fontSize = baseSize * scale + 'px'
let dpr = window.devicePixelRatio || 1;
let scaleRatio = 1 / Math.min(1.2, dpr);
let metaEl = document.querySelector('meta[name="viewport"]'); // 样式选择器
// 设置mata的viewport标签
metaEl.setAttribute('content', `width=device-width,user-scalable=no,initial-scale=${scaleRatio},maximum-scale=${scaleRatio},minimum-scale=${scaleRatio}`);
}
// 初始化
setRem()
// 改变窗口大小时重新设置 rem
window.addEventListener('resize', setRem)
window.addEventListener('onload', setRem)