How to test site in different sized screens

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

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

• Chrome and Firefox: Press F12

An example in Chrome:

Opening the devtools , you'll see an icon like this:

Clickingontheiconwillshowdeviceoptions:

Soyouchooseonetotest.Itevenhasthe"Responsive" option, where you can go by resizing the screen to see the behavior of the page. You can also enable other devices that are disabled by default (such as iPhone 4, super important) or create custom devices according to the screen dimensions you want to test.

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

Andclickon"Throttling":

  

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

In addition, you can use the Android SDK , which can be installed through Android Studio to simulate the application on your 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 Port 80 routing on the router to your computer's IP, so you can access all 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 does not take more than 5 minutes for this, but you may have to free up Windows Firewall.