嗨,我是一名网络开发人员,我正在寻找一种模拟移动设备的方法,该方法还显示它们各自的导航栏,工具栏等。在Google Chrome浏览器的“设备工具栏”(macOS上为v58)中,有一种特定的模式可用于Nexus 5X(和'supported devices', according to Google),这正是我在寻找的内容(请参见下面的屏幕截图),但是我似乎找不到找到在其他设备(例如iPhone,Galaxys等)上启用此功能的方法。

当然,这些条形在设备和运行的浏览器之间会有所不同,因此理想情况下,我正在寻找一种手动指定条形的高度以及它们如何与视口(viewport)进行交互的方法(例如,iOS Safari在视口(viewport)高度的计算,但省去了底部的栏,该栏有点固定页面底部的显示方式(如here所述)。

最终,我想要实现的是一种准确模拟网站在特定设备上的外观的方式,而不是仅仅考虑实际在屏幕上显示其他部分的屏幕尺寸和像素密度当然,这会占用屏幕空间,并会影响外观和用户体验。

欢迎所有想法=)

android - Chrome开发人员工具可通过导航栏模拟移动设备-LMLPHP

最佳答案

您可以使用Blisk浏览器,该浏览器基于Chromium构建,并且支持IOS/Android设备的工具栏和面板,并且具有一组可以在其上进行仿真的设备。

09-16 02:32