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

Question

所以，我一直在使用 Chrome/Firefox 响应工具进行一些网络开发，并浏览了他们获得的“设备”

但是，有些事情看起来完全不同：

Firefox/Chrome responsive IPhone 6 Plus

enter image description here

看看实际设备上的汉堡菜单是如何变大的？看起来与响应式的超级不同

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

注意²：我使用的是<meta name="viewport" content="width=device-width, initial-scale=1">。尝试了其他几个“元”，但似乎没有一个可以解决问题

注意³：尝试以两种不同的方式制作菜单，但都以这样的方式结束

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

感谢您的帮助！ ;)

Answer 1

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

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

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