What should I do if the site displays differently in responsive design mode and on the phone?

Question

Adaptive design

I made my first simple blog (but that's not important). When I went into responsive design mode in Firefox, there was one picture on small screens, and another picture on my phone. On the phone, the site looks the same as on large screens, only to scale. What to do?

Answer 1

Actually, in browser debugging mode using F12 on a computer with Ctrl + Shift + M enabled adaptive mode, view media queries of each stage of the screen in CSS (changing the size of the visible part of the screen), and see which url resource is attached to the image in each case .
If you see an old version of the image on your phone that you exposed during debugging, then try adding the get-parameter ?timestep=201804211800 to the image url in CSS to force the cached image to be reset in the mobile browser.
PS: On the link tag, which includes CSS styles, it is also useful to set a timestep, and when updating styles, do not forget to change it to the current time. This method will work with any caching configuration on the server, and you can be sure that visitors who visited the site before will see the actual content on updated resources with the timestep parameter, where you simply re-uploaded the resource without changing the file name.