Сайт на мобильном выглядит увеличенным, как исправить?

Question

[Augustini]

Всем привет, столкнулась с такой проблемой: сайт на мобильном выглядит увеличенным процентов на 300. Тег

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

добавлен в head, медиа прописывала разные, размеры указывала в vw, %, rem, я перепробовала всё и не могу понять, почему я продолжаю видеть сайт на всех устройствах вот таким образом, хотя на брейкпоинте 768пкс он и перестраивается.
Запрет на увеличение устанавливался и снимался, меняла initial-scale, ничего не помогает.
Пиксели там вообще нигде не встречаются, что ещё может быть с ним не так? Помогите, пожалуйста...

Comments

[Hyubert]

- где проверяете? (лучше всего в devtools)
- я так понимаю что верстка на локалке, да?

[Augustini]

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

[Hyubert]

Augustini, можно ссылку?

[Augustini]

Hyubert, https://example33306.000webhostapp.com/ Конечно, вот
Оставила только планшет пока. Мне кажется, я догадываюсь, в чем проблема, но не понимаю, как это исправить. Я думаю, сейчас сами всё увидите. Такое впечатление, будто все тело html становится больше окна любого девайса, хотя его размер нигде не назначен и в devtool не видно, что дает такой размер, я его вроде не назначала. Вот это вот серое поле.

[Hyubert]

Augustini, нет, тут проблема не в маштабировании, а в том как вы использовали относительние одиницы. Вы не совсем верно понимаете их использования в адаптве. Если кратко - вы задаете точный размер для контейнера в относительних одиницах, наприм .header {width : 87.5rem} что равняетьса 1400 пикселям (rem считаеться беря размер шрифта для html тега, по умолчанию 16px, 16*87.5=1400).
Для контейнеров будет лучше если написать

.container {
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

Для блоков лучше использовать vh, vw, vmin, vmax (поддержка)
А rem, em для текста.

[Augustini]

Hyubert, Я буду держать это в голове. Спасибо вам! ♥

Answer 1

[Eugene Chefranov]

1. Если смотрите в DevTools . то там часто бывает такой глюк, посмотрите на реальном устройстве.
2. Как вы смотрите в Dev|Tools? Вы нажали следующую кнопку?

У вас на скрине виден скролл, что подсказывает что вы просто уменьшаете окно браузера

Comments

[Augustini]

Да, именно так всё и проверяла. Иногда он сбоит: начинаю подгонять прямо там в других единицах либо меняю значения прежних, начинает выглядеть нормально. Переписываю код, сохраняю, проверяю снова - все поползло опять, хотя только что выглядело нормально. Состояние этой кнопки, конечно, проверяла, это точно, потому что я переключала имеющиеся размеры девайсов внутри devtool, чтобы посмотреть (и масштаб там был 100%).
Смотрела на реальных устройствах после всей этой пляски, ползёт, несмотря на различные флюидные единицы и размеры, которые я перепробовала.

[Eugene Chefranov]

Augustini, хорошо бы глянуть на вашу страницу где нибудь в песочнице или на тестовом сайте

[Augustini]

Eugene Chefranov, https://example33306.000webhostapp.com/ пожалуйста, можно пощелкать

[Eugene Chefranov]

Augustini, у вас два закрывающих тега section

[Augustini]

Eugene Chefranov, Спасибо, удалила. Только проблему это, похоже, не решило..

[Eugene Chefranov]

Augustini, на тестовом сайте пока не увидел удаления лишнего section

[Augustini]

Eugene Chefranov, Перезалила, готово

[Eugene Chefranov]

Augustini, попробуйте добавить в стили

section.categories {
    width: 90%;
    margin: 0 auto;
    overflow: hidden;
}

[Augustini]

Eugene Chefranov, Да, похоже, все дело было в этом, планшет заработал как надо, и теперь я смогу все остальное поправить) Спасибо вам большое, вы избавили меня от очень большой головной боли ♥

[Darya Shvakh]

Eugene Chefranov, Добрый день!

Если смотрите в DevTools . то там часто бывает такой глюк, посмотрите на реальном устройстве.

Посоветуйте ресурс или расширение для Chrome в котором Вы верстаете адаптив!
Спасибо!

[Eugene Chefranov]

Daria Shvakh, я использую DevTools (Chrome), но очень редко там возникают глюки. А также по возможности смотрю на реальном устройстве, в частности на iPhone (Safari), потому как на нём чаще всего что-то вылазит.

[Darya Shvakh]

Eugene Chefranov, Спасибо!