前言
在新的公司一直在做pc端，以前的移动端技术怕生疏了，所以去看了下b站的代码。刚好看到代码中`<html style="font-size: 23.4375px>"，数值随着页面大小变化，一般这种情况是有js控制了样式，查了下下面的代码，刚好找到，具体如下：
// 淘宝版常用移动端设置字体大小自适应js
// 立即执行函数，t=window, e=document
!function (t, e) {
// 代码严格模式
"use strict";
var i = {};
!function () {
// n：获取<meta name='viewport'/>dom元素； a：获取<meta name='hotcss'/>dom元素；r：dpr像素比
var n = e.querySelector('meta[name="viewport"]'),
a = e.querySelector('meta[name="hotcss"]'),
r = t.devicePixelRatio || 1, d = 540, m = 0;
// 根据像素比dpr大小设置name='hotcss'的meta标签内容
if (r = r >= 3 ? 3 : r >= 2 ? 2 : 1, a) {
var s = a.getAttribute("content");
if (s) {
var c = s.match(/initial\-dpr=([\d\.]+)/);
c && (r = parseFloat(c[1]));
var o = s.match(/max\-width=([\d\.]+)/);
o && (d = parseFloat(o[1]));
var u = s.match(/design\-width=([\d\.]+)/);
u && (m = parseFloat(u[1]))
}
}
// 给html元素添加属性，并丰富i对象的值： i: {dpr: r, maxWidth: 540, designWidth: 0}
// <html data-dpr=2 max-width=450 design-width=0/>
e.documentElement.setAttribute("data-dpr", r), i.dpr = r, e.documentElement.setAttribute("max-width", d), i.maxWidth = d, m && e.documentElement.setAttribute("design-width", m), i.designWidth = m;
// 生成内容
// <meta name='viewport' content='width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no'/>
var l = 1,
h = "width=device-width, initial-scale=" + l + ", minimum-scale=" + l + ", maximum-scale=" + l + ", user-scalable=no";
// 判断<meta name='viewport'/>标签是否存在，不存在则创建，并赋予内容, 并嵌入到head标签中
n ? n.setAttribute("content", h) : ((n = e.createElement("meta")).setAttribute("name", "viewport"),
n.setAttribute("content", h),
e.head.appendChild(n))
}(),
// 设置i.px2rem
i.px2rem = function (t, e) {
return e || (e = parseInt(i.designWidth, 10)), 320 * parseInt(t, 10) / e / 20
},
// 设置i.rem2px
i.rem2px = function (t, e) {
return e || (e = parseInt(i.designWidth, 10)), 20 * t * e / 320
},
// 设置i.mresize
// 获取html的内容大小，根据宽度，一般手机有375px,414px,411px等，默认将这些像素/16即为最合适的字体大小。
i.mresize = function () {
var n = e.documentElement.getBoundingClientRect().width || t.innerWidth;
if (i.maxWidth && n / i.dpr > i.maxWidth && (n = i.maxWidth * i.dpr), !n) return !1;
e.documentElement.style.fontSize = 20 * n / 320 + "px", i.callback && i.callback()
},
//
i.mresize(),
// 监听调整页面大小时缩放字体大小
t.addEventListener("resize", function () {
clearTimeout(i.tid), i.tid = setTimeout(i.mresize, 33)
}, !1),
// 监听加载时缩放字体大小
t.addEventListener("load", i.mresize, !1),
// 自调用函数在执行时第一次缩放字体大小
setTimeout(function () {
i.mresize()
}, 333),
// 设置window.hotcss的参数，用于sass，less，stylus等
t.hotcss = i
}(window, document);
网友评论