Почему сайт не масштабируется?

Question

[K G]

У меня какой-то жесткий тупняк. Есть сайт шириной 2000px и НЕ нужно, чтобы он адаптировался. То есть открываешь с планшета, а он такой же как и на большом мониторе и тд.
Но когда я открываю на мониторе, например 1200px, то показывается часть сайта, а остальные 800px спрятаны справа и появляется горизонтальный скролл.
Как сделать так, чтобы сайт как бы смасштабировался и уместил свои 2000px в монитор 1200px или любой другой?

P.S. никакие meta теги не прописаны.
P.P.S. не надо только тут советовать width=device-width(это вообще про другое) и initial-scale=1.0

Answer 1

[Ankhena]

Но когда я открываю на мониторе, например 1200px, то показывается часть сайта, а остальные 800px спрятаны справа и появляется горизонтальный скролл.

Логично, именно так он идолжен себя вести.
Или куда он должен деть эти невлезающие 800?

Есть сайт шириной 2000px и НЕ нужно, чтобы он адаптировался.

Он и НЕ адаптируется.

Вам как раз таки и нужно, чтобы он адаптировался. Т.е. занимал 100% ширины. Заавайте относительные размеры.

Comments

[K G]

Ankhena W Адаптировать под ширину(что вы предлагаете) - это значит изменить ширину сайта. А этого мне делать не нужно.
А вот масштабировать сайт, чтобы он 2000px вместил в 1200px это совсем другое. Типа как потыкать ctrl - для уменьшения масштаба. То есть номинальная ширина останется 2000px, но уменьшиться масштаб страницы.

[Ankhena]

pwnography: Какая прелесть

[Ankhena]

pwnography:
Вариант 1: Задавать все размеры в vw и vh
Вариант 2: Узнавать js ширину окна, делить на 2000 и указывать scale. Выглядеть это будет очень сомнительно размазано.

Вариант 3, вменяемый: вспоминаем геометрию, включаем логику и ставим max-width 2000px, width 100% и адаптируем остальные элементы так, чтобы все было удобно видно.

width=device-width не поможет, подойдет только width=2000, но только для мобильных, на десктопные этот тег не действует.

[K G]

Ankhena W есть допустим css свойство zoom, которое делает нечто похожее, но оно плохо поддерживается.
А так же в инете есть сайты, которые не адаптивные и ты их открываешь с мобилки 320px и они отображаются во всю свою ширину и надо зумить, чтобы куда-то тыкнуть. Вот надо так же.

[Vlad Feninets]

pwnography: у таких сайтов как раз и стоит мета-тег с инишиал-скейлом

[Vlad Feninets]

pwnography: либо прописаны media-queries в цсс для адаптивности

[Ankhena]

pwnography: да, именно так, как написал Vlad Feninets либо вьюпорт либо адаптивность.

А так же в инете есть сайты, которые не адаптивные и ты их открываешь с мобилки 320px и они отображаются во всю свою ширину и надо зумить, чтобы куда-то тыкнуть. Вот надо так же.

Покажите. Давайте вместе посмотрим как у них это сделано.

[K G]

Ankhena W Vlad Feninets
Вот нашел( realtechnic.ru/), зайдите пожалуйста туда с компа и мобилы. Сайт будет выглядеть одинаково, номинальные размеры элементов не меняются, на мобиле он просто смасштабировался и влез шириной 1000px в 320px в моем случае

[Vlad Feninets]

если уменьшать ширину в браузере, то появляется скролл внизу
imgur.com/a/zCL5u

если смотреть на мобильном, то все получается зазумленное (т.к. мета-тег не установлен, по дифолту он будет

<meta name="viewport" content="width=device-width">

), поэтому сайт зумится. В этом можно убедиться сделав двойной-тап по сайту.
imgur.com/a/bUo8v

[K G]

Vlad Feninets также я заметил, что если сделать окно на компе какой-нибудь ширины типа 768px и обновить, то он не зумится, а остается горизонтальный скролл. А вот на мобиле все ок. Так же и с моим сайтом, на компе горизонтальный скролл и сайт обрезается, с мобилы он зумится и влезает полностью.

[Vlad Feninets]

pwnography: потому что это стандартное поведение, если не переопределять meta viewport

[K G]

Vlad Feninets окей, тогда как мне переопределить viewport, чтобы не важно на компе или мобиле он помещался во всю ширину/масштабировался. НЕ меняя размеры самих элементов, как с примером выше

[Vlad Feninets]

pwnography:

<meta name="viewport" content="width=device-width">

[K G]

Vlad Feninets: не работает же, я еще в самом вопросе это писал.

[Vlad Feninets]

pwnography: поиграйся со значением initial-scale

[K G]

Vlad Feninets да я уже чего только не попробовал. Похоже данное поведение браузера не обойти никак.

[Ankhena]

pwnography: meta viewport работает только для мобильных браузеров.
Верстайте нормально.

[dimpa91]

html,body {min-width: 2000px; width: 2000px; min-width: 2000px;} хотя должно хватить и просто width. viewport можно опустить, можно 2000px тоже задать.