关于移动web前端,由于不同的devicePixelRatio到指定的css尺寸和实际显示尺寸不一样的问题?
最近在初试移动web前端开发,碰到了这个问题,举个具体的例子:
美术给我的设计稿里有个div是300px*300px,我在css里就写成300px*300px的尺寸,然后再chrome里用emulate模拟,由于在ipad retina屏上devicePixelRatio是2,所以这个div的实际显示尺寸就变为了600px*600px。
不知道在真实设备上是否也是600*600?如果是的话,有什么好的解决方案吗?难道要在这些情况下用css media query设为150*150的尺寸吗?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
用百分比来实现响应式吧
当然不能跟根据设计稿的像素来,你需要适配的设备尺寸可不是固定的,一般来说宽度要用百分比来处理。前面有人说到字体尺寸,这个才是纠结的问题。
其实现在我采用的是淘宝手机端的做法。根据设备css宽度和devicePixelRatio,将网页宽度强制写成10rem。这比宽用百分比,高用em/rem的写法不知道爽多少倍。
回答到一半发现是去年的问题。。。
https://github.com/amfe/article/issues/17
参见这里,阿里的解决方案
不做canvas开发的话很少需要关注devicePixelRatio的问题,我觉得你可能是遇到了
<meta name="viewport">
这个标签的问题。建议你检查一下这个标签的content,看看里面是不是设置了奇怪的width。