How to properly view the site at different screen resolutions?

Question

css

In general, this is the case. I need to adapt the site for different screen resolutions. When viewed through the inspector, everything moves out there, and after refreshing the page, everything is fine. Which of these is true? Sometimes refreshing the page does not help, but only a new opening on the link. After opening the link again, everything is fine. I don't know what to focus on. Maybe there is some more reliable way to check the site at different screen resolutions? Thanks in advance for your replies.

Answer 1

If you add some classes on the php side or wp_is_mobile (oh horror) is screwed on, then the page refresh will affect ... But no one in their right mind does this.
Media queries css and flex minimum or grid layout allows you to reduce media queries to a minimum. And a competent layout will immediately be almost adaptive.
Now about apple phones - they usually have problems with menus - they don’t open ... Well, in general, if everything works correctly on one apple phone (not older than 2 years) - then all other apple gadgets will also be normal.
And so everything is right - if you need to make sure that the devices are all right - there is a service - they have a lot of real devices working there and with them the reliability of the test is high.
I am for ctrl + shift + m - this check covers most tasks.