Почему разница между отображением с телефона и в консоли разработчика?

Question

[Joe Brock]

Ссылка на макет - https://davidmurasov.github.io/

Скриншот с компьютера:


Скриншот с телефона:


Почему так? Как верстать адаптив, если в консоли одно, а на деле - другое? Если что, на телефоне у блока из-за фиксированной высоты (и overflow: hidden) кнопка скрывается наполовину, а на ПК всё нормально. Ширина и высота одинаковая.

Comments

[Шохрух Шаймардонов]

Может дело в разрешении экранов? Может у вас на компе одно, а на телефоне другое?

[Joe Brock]

Шохрух Шаймардонов, нет, смотрел специально разрешение телефона, на пк такое же выбрал. Высота 632px, ширина 360

[Rustam Bainazarov]

Joe Brock, нет ПК под рукой. Какой шрифт использован?

[Joe Brock]

Рустам Байназаров, это разве имеет значение? Roboto

[Rustam Bainazarov]

Joe Brock, да, имеет. Используете откуда шрифт? Google, файл с сервера или из системных берёте?

Помимо того, в разных версиях Android вшиты разные версии Roboto.

[Joe Brock]

Рустам Байназаров, ого, понял. Да, с Google Fonts скачал.

Answer 1

[Владимир]

На телефоне включить отладку по USB. В хроме, в девелопер консоли сможешь подключить и продебажить реальное устройство.

Comments

[Joe Brock]

Спасибо. Но нельзя же под каждое разрешение так делать? У меня телефон с одним разрешением, у других - с другим. Подожду немного, если не будет ответов ещё, отмечу ваш как решение

[Владимир]

Joe Brock, Продебажив вы поймете в чем разница. Возможно у вас неправильно вьюпорт настроен

[Joe Brock]

Владимир, Понял, спасибо

Answer 2

[Тарас Шульга]

Ну как минимум фиксаните меню, так как на разрешении >500 оно уже создает скрол.
А вообще тут много косяков, как понял вы учитесь. Если хотите могу немного объяснить, что и где накосячили.

Comments

[Joe Brock]

Да, учусь) первый макет. Буду благодарен, если напишите, где косяки, да

[Тарас Шульга]

Joe Brock, в телгу стукните - в профиле есть