这是在网上搜索良久,找到的当前比较合适的适配方案。原理是通过动态计算 REM 基值,来动态调整网页尺寸。写这篇博客纯粹是为了自己学习理解移动端适配,现将代码附上:
/**
* 移动端适配,根据屏幕宽度与屏幕 dpr 动态写入 html 的 font-size ( rem 基准值)
* 尽量让这段代码在页面最前面执行
*/
(function(win) {
var opt = {
dpr: 1,
rem: 16,
scale: 1,
width: "device-width"
};
var docEl = document.documentElement;
var fontEl = document.createElement('style');
var metaEl = document.querySelector('meta[name="viewport"]');
opt.dpr = win.devicePixelRatio || 1;
opt.scale = 1 / opt.dpr;
opt.rem = docEl.clientWidth * opt.dpr / 10;
opt.width = docEl.clientWidth;
// 设置viewport,进行缩放,达到高清效果
metaEl.setAttribute('content', 'width=' + opt.dpr * docEl.clientWidth + ',initial-scale=' + opt.scale + ',maximum-scale=' + opt.scale + ', minimum-scale=' + opt.scale + ',user-scalable=no');
// 设置data-dpr属性,留作的css hack之用
docEl.setAttribute('data-dpr', opt.dpr);
// 动态写入样式
docEl.firstElementChild.appendChild(fontEl);
fontEl.innerHTML = 'html{font-size:' + opt.rem + 'px!important;}';
// 给js调用的,某一dpr下rem和px之间的转换函数
win.parsePx = function(v) {
v = parseFloat(v);
return v * opt.rem;
};
win.parseRem = function(v) {
v = parseFloat(v);
return v / opt.rem;
};
win.dpr = opt.dpr;
win.rem = opt.rem;
}(window));