Что делать, если по разному отображается сайт в режиме адаптивного дизайну и на телефоне?

Question

[hellcaster]

Я сделал свой первый простой блог (но это не важно). Когда я зашёл в режим адаптивного дизайну в Firefox, то на маленьких екранах там была одна картинка, а на моем телефоне - другая. На телефоне сайт выглядит так, как и на больших екранах, только в масштабе. Что делать?

Answer 1

[alexalexes]

Собственно, в режиме отладки браузера по F12 на компьютере с включенным режимом адаптивности Ctrl + Shift + M, просматривать в CSS медиа-запросы каждой ступени экрана (изменяя размер видимой части экрана), и смотреть, какой url-ресурс прицеплен к картинке в каждом случае.
Если вы в телефоне видите старый вариант картинки, который вы выставляли в процессе отладки, то попробуйте в url картинки в CSS дописать get-параметр ?timestep=201804211800, чтобы принудительно сбросить закэшированное изображение в мобильном браузере.
PS: На теге link, который подключает стили CSS, тоже полезно timestep задавать, и при обновлении стилей его не забывать менять по текущему времени. Такой метод будет работать при любой конфигурации кэширования на сервере, и можно быть уверенным, что посетители, которые заходили на сайт раньше, будут видеть актуальный контент по обновленным ресурсам с параметром timestep, где вы просто перезалили ресурс без смены названия файла.

Comments

[hellcaster]

Проблема в том, что на телефоне отображается как и на большом экране, а не как в режиме адаптивности