Browser Mobile emulator: how to simulate the navigation bar on all devices?

Question

I use the dev tools from chrome simulator to simulate mobile.

Problem is : when opening on real device, the render is different since real device has some navigation bars.

Chrome dev tools can add this ..only for Nexus5 (and besides it does not add the browser navigation bar)

https://developers.google.com/web/tools/chrome-devtools/device-mode/emulate-mobile-viewports

My question is: how to make simulations like on "real devices" ?

Regards

Answer 1

You can emulate a smartphone with Android Studio.

You need to create a Virtual device manager.

Then you will be able to access your website by emulating your device manager.

Be carefull, you will not be able to access you website with localhost (in your emulated device). Instead you have to pass your local IP in the url bar.

• Instead of http://localhost write http://[YOUR-LOCAL-IP-ADDRESS] to access your web app.
• If your web app use a front framework (react, vue, angular) and you use a local API don't forget to change all your localhost to [YOUR-LOCAL-IP-ADDRESS] inside your app.

To get your local ip adress (in linux) type hostname -I, use the first ip adress of the output:

In my case it's 192.168.10.33 so the url will be http://192.168.10.33

Result: