Почему браузер некорректно отображает мой адаптивный сайт?

Question

[Илья]

Здравствуйте. Я начинающий верстальщик, неплохо знаю основы HTML и CSS. Но вот стал верстать свой первый современный и полноценный сайт (до этого были маленькие проекты, которые пока не увидели свет). Сразу столкнулся с проблемой показа сайта на мобильных устройствах. С помощью гугла нашёл решение - медиазапросы. Подключил, оформил, вроде как работает. Но сразу столкнулся с проблемой - Chrome не всегда корректно отображает содержимое на смартфонах, планшетах и других устройствах. Попробовал Blisk. Проблема та же. Вот вроде бы на iMac сайт смотрится прекрасно, а перезагрузил страницу - ничего подобного и в помине не было, все элементы маленькие и смотрятся крайне плохо. Может кто-то сталкивался с похожей проблемой?

Comments

[Hanneman]

Без вашего кода советы давать - как воду в решете. Причин может быть масса. Но все можно решить, если нажать F12 в браузере и посмотреть.

[TAZAQ]

У вас есть такое:

<meta name="viewport" content="width=device-width, initial-scale=1">

?

Высота шрифта в rem/em?

[Илья]

TAZAQ, да есть, font-size в em.

[Илья]

Hanneman, понимаю, что вопрос будет звучать очень глупо, но что должно произойти, ибо у меня в Chrome при нажатии F12 просто открывается адаптивный режим.

[Hanneman]

il14, ну, во-перых, что мешает отсоединить панель от окна для просмотра полноэкранного сайта?

Во-вторых, что значит "просто открывается адаптивный режим"? Вам ж как раз эмулировать мобильное устройство надо? Вот это как раз достигается через

[Илья]

Hanneman, да, но через него я и тестировал сайт и в нем же состоит проблема, он один раз правильно показывает, другой - нет. С мобильными устройствами не так много проблем, как с мониторами. Например у MacBook 13 Pro разрешение просто бешеное, в Chrome отображается конечно же неправильно, а вот в Blisk один раз нормально, другой - также как в Chrome. Я бы особо и не парился с проблемами отображения в разных браузерах, но у меня опыта маловато и я не знаю как он будет выглядеть на реальных устройствах - как в Blisk или как в Chrome. В любом случае, спасибо за помощь, попробую как нибудь решить эту проблему.

[Hanneman]

il14, так я про это как раз: раз уж результаты разные, то один и тот же элемент через F12 разные атрибуты имеет? Вы хоть публике больше данных для анализа предоставьте, а то так трудно понять.

Answer 1

[Арсений Матыцин]

Если сайт плохо отображается на разных устройства это не браузеры плохие, это код гавно. Не едиными медиазапросами адаптив реализуется, но и умением выстроить логику в межбрейкпойнтном пространстве, к примеру.

Я рекомендую более комплексно подойти к получению знаний и навыков верстки + кроссбраузерности.
Сайт без адаптива последние годы (есть ряд исключений, да), это днище рынка.

Comments

[Илья]

Спасибо за ваше мнение. Я только учусь и постепенно вникаю в верстку. Я обязательно почитаю что-то по этой теме.

[Арсений Матыцин]

il14, я старался быть мягким, как мог при своей прямолинейности.

Тем не менее проблему я осветил.