Как убрать масштабирование широкого сайта для мониторов с маленьким разрешением и телефонов?

Question

[Максим Кирилин]

Добрый день. Суть вопроса такова: есть верстка сайта x96200yc.beget.tech . Так как дизайн рассчитан на широкий формат экрана, а именно 1915рх (body задана фиксированная ширина в 1915рх), на маленьких разрешениях он соответственно масштабируется и появляется боковой скролл.

Нужно чтобы сайт просто отдалялся на всех устройствах и был по ширине экрана, пусть и очень мелким.
Пробовал менять viewport, но это не принесло никаких результатов. Единственное что помогло это изменения у body свойства transform scale в зависимости от разрешения экрана. Но заказчику данный вариант не понравился. Мол трансформация будет сайт тормозить и он конечно же прав. Мне кажется есть более простое решение чтобы отменить масштабирование на всех устройствах.

Вот сайт который работает как мне нужно: https://csgo-happy2.ru.
Если говорить еще понятнее то я хочу чтобы сайт помещался в окно браузера, но при этом имел ширину в 1915рх и к тому же не было скрола.

Answer 1

[Dima Polos]

Для начала удалите meta viewport, дальше зависит от верстки, если там все хорошо в плане адаптивки, то будет просто уменьшаться.

Comments

[DevMan]

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

[Максим Кирилин]

Я уже что ему только не делал. И удалял, и менял всевозможные значения и песни ему пел, а он мне совсем не помог((

[Dima Polos]

DevMan, вопрос чтоб масштабировался

[DevMan]

Dima Polos, само по себе масштабироваться не будет.

[Dima Polos]

DevMan, я так понял, что человек хочет, чтоб сайт не подстраивался под размер, альбоме написал, что надо мета вьюпорт удалить

[DevMan]

Dima Polos, чем это поможет?
"мета вьюпорт" отвечает за транскрипцию медиа запросов.
если их нет, то и тег не нужен. но тогда и речи не может идти об адаптивном дизайне и разрешении экрана.

[Dima Polos]

DevMan, речь не о адаптивке

[DevMan]

Dima Polos, вполне может быть. но теги вопроса говорят об обратном.

[Максим Кирилин]

Просто адаптивки на сайте как бы нет. Вообще. И поэтому нужно чтобы сайт не изменял своих размеров и в то же время умещался в окне браузера

[Dima Polos]

DevMan, вот, Максим написал, я потому и сказал - удалить мета тег, потому что иначе его надо адаптировать

[DevMan]

Dima Polos, походу Максим сам не очень представляет о чем пишет.
возможно, вы правы.

[Максим Кирилин]

Я могу не правильно объяснить, но я знаю что мне нужно. И viewport я удалял, но это не принесло никаких результатов.

[Dima Polos]

Максим Кирилин, Максим, как Вы тестируете? откройте мобильный телефон и смотрите, на экране десктопа в браузере всегда будет скролл, если не адаптивный и если нет мета вьюпорта

[Dima Polos]

DevMan, ну запутал нас Максим) но я по делу писал, просто убрать вьюпорт и медиазапросы перестанут работать, а в мобилке браузер будет рисовать картинку и масштабировать ее - уменьшать в экран

[Dima Polos]

Максим Кирилин, короче смотрите с мобилки - без мета вьюпорта все как заказывали - скрин скинул выше

[Максим Кирилин]

Спасибо Вам за понимание) Действительно с мобилки все отлично. А на десктопной версии, просто открыт браузер, без инспектора появляется боковой скрол. У меня два монитора: первый с разрешением 1920 на 1080 и второй 1280 на 1024. И вот когда браузер находится в первом мониторе с сайтом все отлично и он прекрасно отображается и масштабируется, но когда я переношу окно с браузером на второй экран то появляется скролл.
Я просто не работал с неадаптивными дизайнами и не понимаю что к чему и как их тестировать.