Chrome开发工具可通过导航栏模拟移动设备

Question

嘿,我是一名网络开发人员,我正在寻找一种模拟移动设备的方法,这些设备还会显示各自的导航栏,工具栏等.在Google Chrome的"设备工具栏"(macOS上的v58)中,有一种特定的模式可用于Nexus 5X(以及 谷歌提供的"支持的设备"),这正是我正在寻找的(见下面的截图),但我似乎找不到办法为其他设备启用此功能(例如iPhone,Galaxys等).

当然这些设备和它正在运行的浏览器之间的条形图会有所不同,所以理想情况下我正在寻找一种方法来手动指定条形的高度以及它们与视口的交互方式(例如,iOS Safari包括顶部的条形图.视口高度计算,但省去了底杆,这有点与如何被显示的页面的底部的螺钉(如所讨论这里)).

最终我想要实现的是一种准确模拟网站在特定设备上的外观的方法,而不是只考虑屏幕尺寸和像素密度实际上考虑到屏幕上还有其他部分显示这当然会占用屏幕自己的状态并影响外观和用户体验.

欢迎所有想法=)

Answer 1

您可以使用 Blisk 浏览器，它基于 Chromium 构建，支持 IOS/Android 设备的工具栏和面板，它有一组很好的设备可供您模拟。