Hello there! I am a web developer seeking a method to simulate mobile devices while displaying their respective navigation bars, toolbars, and more. In Google Chrome's 'Device toolbar' (v58 on macOS), there is a specific mode available for the Nexus 5X, as well as other supported devices according to Google. This particular feature is exactly what I need, but it seems challenging to activate for other devices like iPhones or Galaxys.
Since these bars vary between devices and browsers, my ideal scenario would involve manually setting the height of the bars and how they interact with the viewport. For example, iOS Safari includes the top bar in the viewport height calculation, but excludes the bottom bar, causing display issues at the page bottom.
The ultimate goal is to accurately replicate how a website appears on a specific device by considering not just screen sizes and pixel density, but also the space consumed by various on-screen elements that impact visual appearance and user experience.
All suggestions are appreciated! =)