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

Question

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

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

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

Answer 1

用百分比来实现响应式吧

Answer 2

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

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

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

Answer 3

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

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

Answer 4

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