Chrome dev tools to emulate mobile devices with navigation bar

Question

Hey I'm a web developer and I'm looking for a way to emulate mobile devices which also displays their respective navigation bars, toolbars etc. In the 'Device toolbar' in Google Chrome (v58 on macOS) there's a specific mode available for the Nexus 5X (and 'supported devices', according to Google), which is exactly what I'm looking for (see screenshot below), however I can't seem to find a way to turn this on for other devices (such as iPhones, Galaxys etc).

Of course these bars would differ between the devices and the browser that it's running, so ideally I'm looking for a way to manually specify the height of the bars and how they interact with the viewport (e.g. iOS Safari includes the top bar in the viewport height calculation but leaves out the bottom bar, which kinda screws with how the bottom of the page is being displayed (as discussed here)).

Ultimately what I'm trying to achieve is a way to accurately simulate how a website would look on a specific device, by instead of looking at just screen sizes and pixel density actually taking in to account that there are other sections being displayed on the screen which of course takes up screen realestate themselves and affect the appearance and user experience.

All ideas are welcome =)

Answer 1

You can use Blisk browser, it's built on Chromium and supports toolbars and panels for IOS/Android devices, it has a good set of devices that you can emulate on.