如何最好地模仿Web开发的移动设备

Question

所以，我一直在使用Chrome / Firefox响应工具并通过他们获得的“设备”进行网络设计

然而，有些事情看起来完全不同：

Firefox/Chrome responsive IPhone 6 Plus

enter image description here

在实际设备上查看汉堡包菜单的大小？看起来与响应式的

完全不同

Note¹：它发生在所有低分辨率移动设备上

注意²：我正在使用<meta name="viewport" content="width=device-width, initial-scale=1">。尝试了其他几个“元”，但似乎没有做到这一点

注意：尝试以两种不同的方式进行菜单，但最终都是这样的

所以，我想知道，什么是获得更准确的移动版本外观结果的最佳方法

感谢您的帮助！ ;）

Answer 1

最准确的方法是使用实​​际设备。许多移动设备模拟只是模仿设备 - 有时像通过iframe缩小网站一样糟糕。

由于我们并不都可以访问所有这些设备，因此有BrowserStack等服务可以使用物理远程设备来渲染您的网站，有些甚至可以使用DevTools。不幸的是，它确实需要在免费试用后订阅，但如果你担心像素完美的设备测试，它是我发现的最好的服务。

除此之外，您仍然使用您拥有的本机设备或浏览器模拟的设备，这些设备远非完美。