嗨,我是一名网页开发者,正在寻找一种模拟手机设备并显示其相应的导航栏、工具栏等的方法。在Google Chrome(macOS上的v58)的“设备工具栏”中,有一个特定的模式适用于Nexus 5X(以及Google支持的设备),这正是我想要的(请参见下面的截图),但我似乎找不到一种方法将其应用于其他设备(例如iPhone、Galaxy等)。
当然,这些条在设备和它运行的浏览器之间会有所不同,因此理想情况下,我正在寻找一种手动指定栏高度以及它们与视口的交互方式的方法(例如iOS Safari在视口高度计算中包括顶部栏,但不包括底部栏,这会影响页面底部的显示(如这里所述))。
最终,我想要实现的是一种准确模拟网站在特定设备上的外观的方法,而不仅仅是查看屏幕尺寸和像素密度,而是考虑到其他部分正在显示在屏幕上,这些部分自己占用了屏幕空间,并影响了外观和用户体验。
欢迎提出所有想法 =)