1、适配代码
!(function (w, d, options) {
var timeout;
var doc = d.documentElement;
var dpr = w.devicePixelRatio || 1;
var config = Object.assign(
{
ui: 750,
base: 375,
rootValue: 75,
minvw: 320,
},
options || {}
);
config.maxvw || (config.maxvw = config.ui);
doc.setAttribute("data-dpr", dpr);
window.dpr = dpr;
function hairlines() {
if (dpr >= 2) {
var fakeBody = d.createElement("body");
var testElement = d.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
doc.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
doc.classList.add("hairlines");
}
doc.removeChild(fakeBody);
}
}
function setHtmlFontSize() {
var vw = doc.getBoundingClientRect().width;
var remvw = vw > config.maxvw ? config.maxvw : vw < config.minvw ? config.minvw : vw;
var fontSize = (config.rootValue * remvw) / config.ui;
doc.style.fontSize = fontSize + "px";
w.__rem__ = { fontSize : fontSize, remvw : remvw, ui : config.ui, base : config.base };
}
setHtmlFontSize();
if (dpr >= 2) {
var fakeBody = d.createElement("body");
var testElement = d.createElement("div");
testElement.style.border = ".5px solid transparent";
fakeBody.appendChild(testElement);
doc.appendChild(fakeBody);
if (testElement.offsetHeight === 1) {
doc.classList.add("hairlines");
}
doc.removeChild(fakeBody);
}
window.addEventListener(
"resize",
function (e) {
clearTimeout(timeout);
timeout = setTimeout(setHtmlFontSize, 200);
},
false
);
window.addEventListener(
"pageshow",
function (e) {
if (e.persisted) {
clearTimeout(timeout);
timeout = setTimeout(setHtmlFontSize, 200);
}
},
false
);
if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {
handleFontSize();
} else {
d.addEventListener("WeixinJSBridgeReady", handleFontSize, false);
}
function handleFontSize() {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
WeixinJSBridge.on("menu:setfont", function () {
WeixinJSBridge.invoke("setFontSizeCallback", { fontSize: 0 });
});
}
})(window, document);
!function(k,f,e){function h(){var b=d.getBoundingClientRect().width;b=b>a.maxvw?a.maxvw:b<a.minvw?a.minvw:b;var l=a.rootValue*b/a.ui;d.style.fontSize=l+"px";k.__rem__={fontSize:l,remvw:b,ui:a.ui,base:a.base}}function m(){WeixinJSBridge.invoke("setFontSizeCallback",{fontSize:0});WeixinJSBridge.on("menu:setfont",function(){WeixinJSBridge.invoke("setFontSizeCallback",{fontSize:0})})}var g,d=f.documentElement,c=k.devicePixelRatio||1,a=Object.assign({ui:750,base:375,rootValue:75,minvw:320},e||{});a.maxvw||
(a.maxvw=a.ui);d.setAttribute("data-dpr",c);window.dpr=c;h();2<=c&&(e=f.createElement("body"),c=f.createElement("div"),c.style.border=".5px solid transparent",e.appendChild(c),d.appendChild(e),1===c.offsetHeight&&d.classList.add("hairlines"),d.removeChild(e));window.addEventListener("resize",function(b){clearTimeout(g);g=setTimeout(h,200)},!1);window.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(g),g=setTimeout(h,200))},!1);"object"==typeof WeixinJSBridge&&"function"==typeof WeixinJSBridge.invoke?
m():f.addEventListener("WeixinJSBridgeReady",m,!1)}(window,document);
2、options 配置参数
参数 | 说明 | 类型 | 默认值 |
---|
ui | UI 设计尺寸 | number | 750 |
base | UI 设计基于真实设备尺寸(例如:iphone6 375px) | number | 375 |
rootValue | 请保持与 postcss-pxtorem 中 rootValue 一致(推荐 75、100) | number | 75 |
minvw | 适配最小尺寸 | number | 320 |
maxvw | 适配最大尺寸 | number | (ui 尺寸) |
3、初始化(防止闪屏)优化
#app{
max-width: 750px;
font-size:24px;
margin: 0 auto;
}