移动端动态计算HTML的font-size

510 阅读1分钟

淘宝方案

    ! function(e, t) {
        var n = t.documentElement,
            d = e.devicePixelRatio || 1; 

        function i() {
            var e = n.clientWidth / 3.75;
            n.style.fontSize = e + "px"
        }
        if (function e() {
                t.body ? t.body.style.fontSize = "16px" : t.addEventListener("DOMContentLoaded", e)
            }(), i(), e.addEventListener("resize", i), e.addEventListener("pageshow", function(e) {
                e.persisted && i()
            }), 2 <= d) {
            var o = t.createElement("body"),
                a = t.createElement("div");
            a.style.border = ".5px solid transparent", o.appendChild(a), n.appendChild(o), 1 === a.offsetHeight && n
                .classList.add("hairlines"), n.removeChild(o)
        }
    }(window, document)

小米方案

    ! function(e) {
        var t = e.document,
            n = t.documentElement,
            i = e.devicePixelRatio || 1,
            a = "orientationchange" in e ? "orientationchange" : "resize",
            d = function() {
                var e = n.getBoundingClientRect().width || 360;
                (1 == i || e > 720) && (e = 720), n.style.fontSize = e / 7.2 + "px"
            };
        n.setAttribute("data-dpr", i), t.addEventListener && (e.addEventListener(a, d, !1), "complete" === t
            .readyState || t.addEventListener("DOMContentLoaded", function() {
                setTimeout(d)
            }, !1))
    }(window)
    
    

腾讯方案

        (function(base, min, max, scaling){
          var cacheWidth = 0;
          var timer;
          var docEl = document.documentElement;
          var recalc = function () {
            var clientWidth = docEl.clientWidth;
            if (!clientWidth) return;
            clientWidth = Math.max(Math.min(clientWidth, max), min);
            if(cacheWidth !== clientWidth) {
              clearInterval(timer);
              cacheWidth = clientWidth;
              docEl.style.fontSize = scaling * (clientWidth / base) + 'px';
            }
          }
          recalc();
          setTimeout(recalc, 300);
          if (!window.addEventListener) return;
          var resizeWithTimer = function() { timer = setInterval(recalc, 10); }
          if ('onorientationchange' in window) window.addEventListener('orientationchange', resizeWithTimer);
          if ('onresize' in window) window.addEventListener('resize', resizeWithTimer);
        })(375, 300, 768, 100);
      
      
      

京东

(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 37.5 * (clientWidth / 375) + 'px';
    };

  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);