Почему на телефоне сайт обрезан?

Question

[Егор Антропов]

так выглядит на компе

Так выглядит на телефоне

Если уменьшать ширину окна через консоль разработчика, то всё нормально уменьшается до 480 пикселей, а потом просто перестаёт уменьшаться. С чем это может быть связано?
При этом его нельзя уменьшить, сводя пальцы.

P.S. Я знаю что такое адаптивная верстка. Заказчику не нужна адаптивная верстка.

Comments

[Ankhena]

1. Какая ширина (минимальная ширина) сайта (контентного поля)
2. Что написано в meta viewport?

[Егор Антропов]

Ankhena, минимальная ширина - 1440
Во вьюпорте ничего нет

[Ankhena]

Егор Антропов, минимально 1440 многовато даже для десктопов.
Чтобы неадаптивный сайт масштабировался на телефоне, нужно прописать meta viewport с фиксированной шириной.
Выйдет мелко.

Заказчику не нужна адаптивная верстка.

Если заказчику не нужна адаптивная верстка, то на телефоне выглядеть будет "не фонтан".

[Егор Антропов]

Ankhena, А как это сделать?
Я пробовал так

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

и ещё несколько вариантов. ничто не подошло.

[Ankhena]

Егор Антропов, 1440

Answer 1

[Lord_Dantes]

Уберите в body или html overlfow: hidden;

Comments

[Егор Антропов]

Там нет overflow: hidden.
Скролить можно и по y, и по x

Answer 2

[Adik Izat]

Изучайте Grid и Flex! Это очень важно для адаптивки, 2019 год уже!

Comments

[Егор Антропов]

Там используется флекс. И при чём тут адаптивка?

[Adik Izat]

Егор Антропов, если бы он использовал grid, просто через grid-template-columns дал бы body значение "1fr". И у него body растягивалось бы на всю ширину вьюпорта.

[Егор Антропов]

Adik Izat, grid не везде поддерживается

[Adik Izat]

Егор Антропов, это не 2016 год, бро. 85% клиентов поддерживают grid и эта доля будет только расти.