在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