为什么开发工具网页显示完全和手机不一样？

Question

用浏览器开发者工具调试手机端页面，分别用ip4，ip5，ip6，ip6p模式，调整好后，上传。

ip6sp手机浏览，发现高度完全和我本地测试的ips6p模式显示不一样，然后分别用安卓小米3和苹果6s，不管手机尺寸怎么样发现他们显示的结果都和pc开发者工具的ip4模式一样的高度和间距。

我知道流量器的标题栏和状态栏会占用一定的空间，但为什么4寸屏和4.7寸屏展示的都一样的高度，怎么更好的理解开发者工具的模式和理解经验。

Answer 1

我理解的做页面，是高度还原设计图。

整个页面的效果，是由设计图决定。布局方式，元素大小，字体大小，间隔，边距。都应该是源自于设计图。

前端需要做的，是用 HTML 和 CSS 来还原设计图。如果布局和样式的数据来自设计图，那么在做移动端开发时，模拟器和手机展示的差异并不会影响实际效果。

我觉得题主的问题的问题可以是如何高度还原设计图。