getBoundingClientRect

在2011年W3C出炉了CSSOM视图模块(CSS Object Model View)。CSSOM视图模块(CSSOM View Module)定义了一些 API，Web 开发人员使用这些 API 可以进行检查，也可以以编程方式更改文档及其内容的视觉属性。

后来此模块丰富了更多方法, 其中之一 https://drafts.csswg.org/cssom-view/#dom-element-getboundingclientrect

利用此方法在调整响应式页面的viewport很实用:

! function(a) {
    function d() {
        var e = g.getBoundingClientRect().width;
        750 < e / b && (e = 750 * b);
        a.rem = e / 7.5;
        g.style.fontSize = a.rem + "px";
        window.htmlFontSize = a.rem + "px"; }
    var b, c, f = a.document,
        g = f.documentElement;
    f.querySelector('meta[name="viewport"]');
    f.querySelector('meta[name="flexible"]');
    b || c || (c = (a.navigator.appVersion.match(/android/gi), a.navigator.appVersion.match(/iphone/gi)), b = a.devicePixelRatio, b = c ? 3 <= b ? 3 : 2 <= b ? 2 : 1 : 1, c = 1 / b);
    a.dpr = b;
    a.addEventListener("resize", function() { d() }, !1);
    a.addEventListener("pageshow", function(a) {
        a.persisted &&
            d()
    }, !1);
    d()
}(window);

相关延伸阅读:

阮一峰老师的文章http://www.ruanyifeng.com/blog/2015/09/web-page-performance-in-depth.html

移动web开发之像素和DPRhttp://www.cnblogs.com/xiaohuochai/p/5494624.html

转载于:https://www.cnblogs.com/haimingpro/p/6707736.html