chrome 仿真_让我们谈谈Google Chrome中的移动仿真

简而言之，我们爱Google Chrome。 它运行平稳，外观简单，并具有许多有用的Apps 。 从开发人员的角度来看，在支持最新的Web标准方面，谷歌浏览器始终处于领先地位。

它还带有许多用于Web开发的工具，其中一些尚未在其他浏览器内置的开发人员工具中实现。 其中包括“ 视口仿真” ，“地理位置和设备方向覆盖”以及“ 触摸仿真” 。

最近，Google Chrome浏览器推出了一项名为“ 移动仿真”的新功能，该功能使我们能够在Chrome上看到网站在实际移动设备中的React，工作方式和行为方式。 听起来不错？ 好吧，让我们看看它是如何工作的。

回应或不回应

尽管响应式Web设计最近已被广泛采用，但是它不能满足所有类型网站的需求。 由于移动设备的限制，某些类型的网站可能需要专用的单独的移动网站 -该网站的某些元素可能会在移动设备上消失； 在移动设备和台式机上，功能的行为可能有所不同。

以Amazon.com为例。 当您在桌面上查看它并调整视口大小时，什么也不会发生。 拿起手机，查看它，它会显示该网站的简化手机版本。 亚马逊采取了单独的移动网站路线，而不是对其网站进行响应。

这个怎么运作

如果要这样做，请建立一个专用的移动网站，现在可以在Chrome中使用“移动仿真”来简化调试该网站的工作。 在撰写本文时，此功能仅在Chrome Canary中可用。 可以在DevTools中的新选项卡Emulation下找到它。

值得注意的是，一旦将位置或名称推送到“常规” Chrome，就可以更改位置或名称。

Chrome有许多预定义的设备，包括Google Nexus，iPad，iPhone，Blackberry和Kindle。 选择一个，点击“ 模拟”按钮。

设备规格（例如视口大小，用户代理字符串和像素比率）以及其他设置会自动反映所选设备的尺寸。

刷新Chrome，您现在应该可以浏览该网站，就像在移动设备上查看该网站一样。 如果仔细观察，您会发现鼠标光标变成一个圆圈，指示aTouch事件。 在笔记本电脑的触摸板上，您可以用两根手指滚动，而用三根手指滑动。

此外，您可以在某些具有专用移动版本的网站上探索此功能，例如：

• 脸书
• 谷歌
• 目标
• 纽约时报
• 优酷

翻译自: https://www.hongkiat.com/blog/chrome-mobile-emulation/