关于lib-flexible源码阅读的一些疑问

发布于 2022-09-02 08:44:59 字数 821 浏览 35 评论 0

最近看到一篇关于终端适配的文章,了解到通过js计算获得html的font-size来影响rem可以适配到多种终端,
但是看了一下lib-flexible的源码,不是特别的理解作者除了计算除了rem还计算了dpr并且根据dpr设置了
initial-scale

 if (!metaEl) {
        metaEl = doc.createElement('meta');
        metaEl.setAttribute('name', 'viewport');
        metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
        if (docEl.firstElementChild) {
            docEl.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
        }
    }

所以想请教一下各位,计算dpr并根据dpr求initial-scale是为了什么

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

囚你心 2022-09-09 08:44:59

文档有说明的吧~~~
dpr 是根据 Android iOS== 设备来定义
用于 css 设置文字 px 大小

selector {
    width: 2rem;
    border: 1px solid #ddd;
}
[data-dpr="1"] .selector {
    height: 32px;
    font-size: 14px;
}
[data-dpr="2"] .selector {
    height: 64px;
    font-size: 28px;
}
[data-dpr="3"] .selector {
    height: 96px;
    font-size: 42px;
}

链接 http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html?plg_nld=1&from=groupmessage&plg_uin=1&plg_auth=1&plg_usr=1&plg_dev=1&plg_nld=1&plg_vkey=1&isappinstalled=0

手心的温暖 2022-09-09 08:44:59

比如在dpr是2的手机上,[data-dpr="2"] .a字体为24px,又因为页面缩放0.5,字体为还是12px。。这就是设置initial-scale的原因

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文