关于移动web前端,由于不同的devicePixelRatio到指定的css尺寸和实际显示尺寸不一样的问题?

发布于 2022-08-29 16:38:00 字数 272 浏览 22 评论 0

最近在初试移动web前端开发,碰到了这个问题,举个具体的例子:

美术给我的设计稿里有个div是300px*300px,我在css里就写成300px*300px的尺寸,然后再chrome里用emulate模拟,由于在ipad retina屏上devicePixelRatio是2,所以这个div的实际显示尺寸就变为了600px*600px。

不知道在真实设备上是否也是600*600?如果是的话,有什么好的解决方案吗?难道要在这些情况下用css media query设为150*150的尺寸吗?

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

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

发布评论

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

评论(4

乖不如嘢 2022-09-05 16:38:00

用百分比来实现响应式吧

情仇皆在手 2022-09-05 16:38:00

当然不能跟根据设计稿的像素来,你需要适配的设备尺寸可不是固定的,一般来说宽度要用百分比来处理。前面有人说到字体尺寸,这个才是纠结的问题。

其实现在我采用的是淘宝手机端的做法。根据设备css宽度和devicePixelRatio,将网页宽度强制写成10rem。这比宽用百分比,高用em/rem的写法不知道爽多少倍。

回答到一半发现是去年的问题。。。

转瞬即逝 2022-09-05 16:38:00

https://github.com/amfe/article/issues/17

参见这里,阿里的解决方案

梦年海沫深 2022-09-05 16:38:00

不做canvas开发的话很少需要关注devicePixelRatio的问题,我觉得你可能是遇到了<meta name="viewport">这个标签的问题。
建议你检查一下这个标签的content,看看里面是不是设置了奇怪的width。

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