Почему на реальном телефоне и в инструментах разработчика отличается отображения сайта?

Question

[Валентин Бируля]

Вот такая ситуация:
Сайт на телефоне открывается в нормальном виде но есть полоска скролла увеличивающая ширину сайта в 2 раза(само собой на второй части экрана ничего нет)

meta тег вьюпорт подключен в таком ввиде:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

Comments

[Ankhena]

Если выпирающие части скрыты с помощью overflow на body, то эта конструкция постепенно перестает работать.

Другой вариант, что в эмуляторе тоже есть полоса прокрутки, если подвигать экран.
Третий, что хромы иногда её бережно убирают, не говоря ни слова.

Короче:
обводите все элементы и псевдо рамочками, смотрите что выпирает и чините.

[Валентин Бируля]

Ankhena, понял спасибо

Answer 1

[Elena Fire]

Это значит, что есть элемент, ширина которого больше ширины экрана. Последовательно отключайте теги, чтобы найти проблему. А потом работайте со свойствами элемента, который не вписывается в экран.
Скорее всего дело в шапке или подвале.

Answer 2

[Alfieros]

Научу плохому :D

body{
 overflow: hidden;
}

P.S - Это на случай, если очень прижало и нет времени искать элемент, а заказчику уже нужно что-то показать.
А так, ищите выделением элемент который выпирает.

Comments

[Валентин Бируля]

Научили бы если бы сам не умел))) Но проблема появлялась даже при overflow-x: hidden;
как подсказал Ankhena оверфлоу хидден видимо больше не работает как раньше

[Alfieros]

Валентин Бируля, возможно где-то отступы.
Вы в начале стилей указываете?

*{
padding: 0;
margin: 0;
box-sizing: border-box;
}

Потому что по дефолту они есть, и браузер их регулирует, если их не отключить.