CODEWITHSUNDEEP
google-chrome-devtools
yarek
yarek

Reputation: 12064

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

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

Upvotes: 22

Views: 3097

Answers (1)

Lenny4
Lenny4

Reputation: 1678

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:

enter image description here

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

Result:

enter image description here

Upvotes: 1

Related Questions