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)