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

JavaNewBoy
  • 1.3k

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

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

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

回复
阅读 11.7k
4 个回答
liuxuewei
  • -1
新手上路,请多包涵

用百分比来实现响应式吧

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

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

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

no书书
  • 1
新手上路,请多包涵

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

你知道吗?

宣传栏