flexible的data-dpr在不同设备显示下始终为1

发布于 2022-09-05 14:47:54 字数 717 浏览 15 评论 0

如图:
在不同设备下,html的data-dpr属性始终显示为1,

clipboard.png

clipboard.png

clipboard.png

flexible在vue中的配置参考 这篇 教程

希望用过flexible的大神可以指点一二,是什么原因导致他不会变的呢?谢谢!

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

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

发布评论

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

评论(2

忱杏 2022-09-12 14:47:54

我已找到了原因。flexible默认会查找name=“viewport”或者name=“flexible”的meta标签,当默认自己设定了viewport,initial-scale=“1”,等等之后,相当于默认设置了dpr=1,或者name="flexible” 下设置默认的 initial-dpr=1等默认值,这样flexible.js作用的html的data-dpr不会变,如果不写

<meta name="viewport" content="">

或者<meta name="flexible" content="">,则会自动根据不同设备改变data-dpr的值,这样就可以根据不同的data-dpr设置字体大小不变,仅放大相应倍数,
如下less 的mixin:

.font-dpr(@font-size) {
  font-size: @font-size;
  [data-dpr="2"] & {
    font-size: @font-size * 2;
  }
  [data-dpr="3"] & {
    font-size: @font-size * 3;
  }
}

这里前提,传入的font-size是data-dpr=1的时候的值,iphone6,iphone5默认dpr为2,6plus为3.

下面是flexible源码部分截图

clipboard.png

这里注意只要meta有name=“viewport” 的都会被认为设置了默认值。

向日葵 2022-09-12 14:47:54

切完机型,,刷新下

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