从开发人员的角度来看,在支持最新的Web标准方面,谷歌浏览器始终处于领先地位。

它运行平稳,外观简单,并具有许多有用的Apps

简而言之,我们喜欢Google Chrome。

其中包括“ 视口仿真” ,“地理位置和设备方向覆盖”以及“ 触摸仿真”

它还带有许多用于Web开发的工具,其中一些尚未在其他浏览器内置的开发人员工具中实现。

好吧,让我们看看它是如何工作的。

听起来不错?

最近,谷歌浏览器推出了一项名为“ 移动仿真”的新功能,该功能使我们能够在Chrome上看到网站在实际移动设备中的反应,工作方式和行为方式。

回应或不回应

在移动设备和台式机上,功能的行为可能有所不同。

由于移动设备的限制,某些类型的网站可能需要专用的单独的移动网站 -该网站的某些元素可能会在移动设备上消失;

尽管响应式Web设计最近已被广泛采用,但是它不能满足所有类型网站的需求。

亚马逊采取单独的移动网站路线,而不是对其网站进行响应。

拿起手机,查看它,它会显示该网站的简化手机版本。

当您在桌面上查看它并调整视口大小时,什么也不会发生。

Amazon.com为例。

怎么运行的

可以在DevTools中的新选项卡Emulation下找到它。

在撰写本文时,此功能仅在Chrome Canary中可用。

如果要这样做,请建立一个专用的移动网站,现在可以在Chrome中使用“移动仿真”来简化调试该网站的工作。

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

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

选择一个,点击“ 模拟”按钮。

Chrome有许多预定义的设备,包括Google Nexus,iPad,iPhone,Blackberry和Kindle。

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

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

在笔记本电脑的触摸板上,您可以用两根手指滚动,而用三根手指滑动。

如果仔细观察,您会发现鼠标光标变成一个圆圈,指示“触摸事件”。

刷新Chrome,您现在应该可以浏览该网站,就像在移动设备上查看该网站一样。

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

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


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

相关文章: