How to test site on screens of different sizes

Asked

Viewed 353 times

1

I’m doing the creation of a site, but it’s still only on my machine on the localhost, how do I test on different screen sizes as for example on smartphones screens, Androids, SOS, but, firefox, chorme ... I want this site to be compatible with all screens, I am using bootstrap 4, and testing in firefox minimizing and increasing the screen, but I think it is not the right way to do.

  • 1

    Have you tried Ctrl+Shift+M?

  • You can use your own browser for this. Right-click mouse and then go on to inspect, there will be a name "Toggle device Toolbar".

  • Yes I am using this Anderson feature but there are other browsers that I need to test tbm

  • For Chrome and I believe that Firefox tb, has several plugins that help test responsiveness. You can take a look here, sometimes you have something to help you https://chrome.google.com/webstore/search/Responsive%20

2 answers

2


Some browsers (Chrome, Firefox and Opera, for example) have features that simulate screen size for various device types.

You can open the devtools (developer tools) in these browsers and choose a device that wants to view your page.

  • Chrome and Firefox: press F12
  • In Opera: press CTRL + Shift + i

An example in Chrome:

Opening the devtools, you will see an icon that looks like this:

inserir a descrição da imagem aqui

By clicking on the icon, you will see options for devices:

inserir a descrição da imagem aqui

Then you choose one to test. Even has the option "Responsive", where you can go resizing the screen to see the behavior of the page. You can also activate other devices that are disabled by default (like iPhone 4, super important) or create custom devices according to the screen dimensions you want to test.

Another excellent resource is the Throttling, where you can simulate a connection speed (including a connection offline) to see page behavior on slower connections. Click "Edit":

inserir a descrição da imagem aqui

And click on "Throttling":

inserir a descrição da imagem aqui

Of course these resources of desktop browser will not simulate 100% the behavior of a mobile device. Some behaviors are quirky on mobile devices. So it’s good to also test directly on mobile devices that you have available. Only, it would require your mobile device to have access to your local server.

  • Thank you now I am able to perform the tests with this information that you passed me. thanks

  • You’re welcome! This feature saved the lives of developers. Imagine you have nowhere to test. At most you would have to resize the browser window, which would be terrible. Enjoy and succeed in your projects.

  • Truth even saved me thank you :)

1

In addition, you can use the Android SDK, that can be installed through Android Studio, to simulate the application on the Smartphone or in a virtual machine. This may take a long time to download, but it is much more faithful, professionally speaking.

You can also configure the door routing 80 on the router to your computer’s IP, so you can access all of your LOCALHOST applications from any computer or smartphone inside or outside your workplace, only using your IP followed by the application folder. It looks complicated but it doesn’t take more than 5 minutes for this, but you may have to release the Windows Firewall.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.