Skip to content

◷ 发表于: 2025-03-18

◷ 更新于: 2025-03-27

🅆 字数: 0

设置 rem

防止 ios 中微信字体变大后布局错乱【点我查看代码】
css
body {
    -webkit-text-size-adjust: 100% !important; 
}
javascript
(function (doc, win) {
  const docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      const clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 37.5 * (clientWidth / 375) + 'px';

      // 安卓微信中字体调大后适配
      if(!doc.body) return;
      const d = doc.createElement('div');
      d.style.cssText="width:10rem;height:0;overflow: hidden;position:absolute;z-index:-1;visibility: hidden;";
      doc.body.appendChild(d);
      const dw =  d.offsetWidth;// 1rem的实际展示px值
      doc.body.removeChild(d);
      const fz = 10 * ( 37.5 * (clientWidth / 375)); //正常计算出来的rem基准值 , 可自行修改为rem计算好的值
      const realRem = fz;
      if(dw !== fz){//不相等 则被缩放了
        realRem = Math.pow(fz , 2) / dw / 10 ;
        docEl.style.fontSize = realRem + 'px';
      }
    };
  recalc()
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

基于 CC BY-NC-SA 4.0 许可发布