How can I test the layout of the site in all sizes and browsers?

Question

Software testing

Who uses what to check the layout and display the site correctly?
Similar sites:
quirktools.com/screenfly
deviceponsive.com
responsivetest.net
They do not give a complete picture and do not always display correctly.

Answer 1

There are quite a few options, actually.
A number of clarifying questions are needed here:
1) Do you need to check _regularly_ or one-time (hand over the project - checked - forgot)?
2) What browsers and permissions do you really need? There are two things to determine here:
What browsers do you develop for and are willing to provide support for, and do your users need it? The first is determined based on your resources, the second - based on the statistics of site visits and other things.
Support "ALL BROWSERS" and "ALL PERMISSIONS!!" - useless case. You will spend a lot of time supporting ancient browsers and resolutions that exist on two netbooks in the world, but you will not get anything.
3) How much time, effort and money are you willing to spend on such tests?
4) What "error" in the test results will suit you?
Option 1) Virtual machines. Many different ones, with different versions of browsers, axes, etc.
Screen resolutions are perfectly configured there, everything is scaled accordingly.
Pros:
- High probability of reproducing bugs from real devices.
- Customizability - all you need to do is deploy N virtual machines, and download the versions of browsers you need on them.
Cons:
- A billion virtual machines that need to be created and updated.
Option 2) Specialized services. The BrowserStack mentioned above and more.
Similar services are available for mobile and MacOS devices separately.
Pros:
- Simplicity - bought, opened, checked.
Cons:
- Low compliance. Often "emulators" of old versions are used instead of real old versions, which give false results.
- Not everywhere you can register hosts and other joys for access to "internal" stands.
Well, it’s worth mentioning separately that if you look at the service for testing on mobile phones and MacOS, look for those services that provide access to hardware machines, not emulators.
Emulators are a bad option.
Option 3) Own "zoo" of devices.
This is especially true for mobile devices. In most cases, it is easier to start your own fleet of devices, to which you can configure access "from outside". For this, too, by the way, there are ready-made solutions.
Pros:
- Real hardware = real work of this hardware, not pseudo triggering of emulators.
- Customizability - just what you need, and configured the way you want.
Cons:
- Expensive.
- It is necessary to constantly replenish the "collection" of devices.
Well, or at the mercy of Indian outsourcers.

Answer 2

Go to the nearest hardware store and test it there. I always do this. Consultants will never mind.

Answer 3

lahno, hello!
Chrome has a tool for testing websites for mobile devices. This can be activated in the chrome console.

Answer 4

www.browserstack.com - paid, but cool
https://modern.ie/ru-ru - free virtual machines from macrosophages.
But in general, to check at different screen resolutions (suitable only for a PC), you can simply shrink the browser window to the desired size.

Answer 5

You can use a virtual machine, install different browsers there and test it)) Dimensions can be tested by changing the size of the browser window)