跳到主要内容

flexible 适配方案

实现​

一、根据布局视口动态计算根节点字体大小​

实现

function setBodyFontSize() {
    if (document.body) {
        document.body.style.fontSize = 12 * dpr + "px";
    } else {
        document.addEventListener("DOMContentLoaded", setBodyFontSize);
    }
}
function setRemUnit() {
    const rem = document.clientWith / 10;
    document.style.fontSize = rem + "px";
}

setBodyFontSize();
setRemUnit();

window.addEventListener("resize", setRemUnit);
window.addEventListener("pageshow", function (e) {
    if (e.persisted) {
        setRemUnit();
    }
});

二、控制 viewport 的 width 和 scale 值适配高倍屏​

思路:

  1. 设置 viewport 的 width 为 device-width : 改变浏览器 viewport 的默认宽度为理想视口宽度

  2. 设置 viewport 的 initial-scale、minimum-scale、maximum-scale 的值: 从而实现 1 Css 像素 = 1 物理像素, 用来适配高倍屏的显示效果

实现

function setViewPort() {
    const metaElement = document.querySelector("meta[name='viewport']");
    const dpr = window.devicePixelRatio;
    const scale = 1 / dpr;
    metaElement.setAttribute(
        "content",
        `width=device-width,initial-scale=${scale},minimum-scale=${scale},maximum-scale=${scale},user-scalable=no`
    );
}