我正在为移动设备(主要是iPhone和android)开发网络应用程序。但是css-px不是设备-px，这取决于window.devicePixelRatio(对于iPhone4S为2)。我们的设计师总是基于640 x 960的屏幕(iPhone 4S屏幕)进行设计。所以我在css中使用的大小是设计中指定的大小的一半。当涉及到1个设备像素的边界时，css中的0.5px意味着没有边界。我在网上搜索后找到了两种解决方案(框阴影和边界图像)，实现了1个retina px边界，但实现起来很难看。
因此，我在视口中将初始比例设置为0.5，现在css中的大小与web设计相同，并且1个retina px边界很容易实现。
这是个好做法吗？
如果你想使用该页面的唯一设备是iPhone 4/5，那么这应该是完全可以的。
但是，如果你的公司正在寻找响应性强的页面(适合多个分辨率的屏幕)，那么公司的出发点应该是接受这些设计与现实世界不匹配(或者必须以不同的分辨率制作更多)。。。
技术起点是设置
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
minimum-scale=1.0">
有时可能有使用其他设置的原因，但通常情况下，这是起点。
它说，你应该使用设备浏览器的CSS像素作为设备的宽度，并将初始缩放设置为100%宽度，将最小缩放("缩小")设置为100%宽。
当你谈到数学时，原因很简单；iPhone 4/5的宽度为640像素，CSS宽度为320像素
这是640设计的50%宽度(每像素2:1的点比率)
。。。但Galaxy S4的屏幕为1080px，CSS宽度为360px(33.3%，3:1)。
那么，您将比例设置为0.5还是0.333？
也许在某些情况下，这确实很重要，因为桌面网站目前是如何制作的，它无法压缩超过某个最小宽度。
但在寻求自适应的典型设计中，你会从设备开始决定它应该有多宽，并且你的设计尽可能适合这个宽度。
同样，这通常意味着使用对象宽度的百分比或em/rem进行响应设计，并在媒体查询中设置断点以针对不同的布局设计。
因此，你可能会让设计师以320像素设计320-480像素，480像素到640像素，等等…
…或者，一旦你比iPad瘦了，你的视图就会越来越小。
这一切都取决于你、你的设计师和你的公司
但这至少是项目启动的方式，也是项目背后的理念。