С помощью каких стилей или скриптов можно добиться масштабирования сайта?

Question

[Анастасия]

Здравствуйте. Я уже давно сижу во вконтакте с масштабом 150% и иначе сайт уже не воспринимаю. Вот так он выглядит в оригинале на fullhd мониторе:

а вот так сайт обычно вижу я

Такой масштаб я получаю, крутя колёсико с зажатым Ctrl.

У меня возник вопрос: а как получить такой же эффект, но используя лишь код?
В голову сразу пришла мысль: сделать

// но только для блоков, а не для body
transform: scale(1.5);
transform-origin: top;

, но в этом случае может что-то поломаться на сайте. В случае с vk: ломается прокрутка левой менюшки. При прокручивании ленты вниз и возвращении обратно - менюшка возвращается только наверху страницы, поэтому вариант с scale - не самый лучший. В идеале хотелось бы инициировать именно масштаб браузера, а не пытаться нагружать ПК лишними перерисовками transform (учтите, что граф. процессор может быть выключен).

Для чего это надо?
А нужно мне это для адаптивности. Порой не хочется делать отдельную версию для fullhd, и ограничиться самым большим макетом в 1000px. На fullHd это выглядит мелко и нелепо. Масштаб бы исправил ситуацию.

Скажите, с помощью каких стилей или скриптов можно организовать грамотный масштаб?

Comments

[Rustam Bainazarov]

А нужно мне это для адаптивности. Порой не хочется делать отдельную версию для fullhd, и ограничиться самым большим макетом в 1000px. На fullHd это выглядит мелко и нелепо. Масштаб бы исправил ситуацию.

Адаптивность так никто не делает. Адаптивность — это не увеличение масштаба элементов в рамках одного класса устройств и настроек ОС. Это приведёт к тому, что на одном телефоне всё будет жутко мелкое, а на другом — жутко большое. И, поверьте, никто на 4К-мониторе не захочет видеть ваш сайт в 400% увеличении, как вы планируете. Вы сломаете визуальное восприятие сайта, пользовательские значения масштаба, пользовательские настройки размера текста и т. д. и т. п. Опять же, если это вас не остановит, то найдите пример адаптивного сайта, у которого бы адаптивность была сделана таким образом. Подсказка: таких нет, потому что так делать нельзя. Есть простое правило: чем выше физическое разрешение экрана и чем меньше его физический размер, тем больше степень масштаба для сохранения адекватных размеров интерфейса.

P. S. Если настолько сильно хочется, LMAO, то у вас два быстрых варианта: transform и zoom.

[WbICHA]

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

[Rustam Bainazarov]

WbICHA, да, по сути так оно и есть. Увеличение браузера работает по принципу изменения степени масштаба ОС и меняет размеры viewport с его виртуальными пикселями, полученными из реального разрешения экрана × масштаб ОС × степень масштаба страницы в настройках браузера.

В целом, это легко проверить вот тут, меняя масштаб ОС, настроек браузера или размер его окна:
https://jsfiddle.net/y3ha5c0q/show

[Сергей ZSA]

Рустам Байназаров, не вводите человека в заблуждение. Не transform единым.

[Rustam Bainazarov]

Сергей ZSA, есть другие варианты быстрого решения проблемы (которой, кстати нет)? Тут вопрос явно не про em, rem и даже не про безумные варианты на vw. Человеку нужно быстро сделать плохо, а не долго и хорошо.

[Сергей ZSA]

Рустам Байназаров, если человеку просто не хочется смотреть сайт в таком разрешении – значит надо увеличить размер шрифта браузера. Если человеку нужно разработать сайт, который должен быть резиновым – значит тут не должно быть разговора про "быстро" и "дешево". Именно это нужно объяснять как автору поста, так и его заказчику, если там всё так, а не разговоры разговаривать о том, как это сделать "колхозно быстро и дёшево". Иначе у нас так и будет куча необразованных верстальщиков, которые только и умеют, что стряпать на скорую руку посредственные сайты.

[Rustam Bainazarov]

Сергей ZSA, я это и объяснил в самом первом сообщении, не находите? Весь его посыл направлен на это.

[Сергей ZSA]

Рустам Байназаров, ваше сообщение говорит человеку только о том, что такое сделать невозможно и всё тут: `найдите пример`, `никто так не делает` и тп. Не находите?)

Вопрос был изначально не в том, "а можно ли зафигачить адаптивность только через transform". Спрашивается, как сделать грамотный масштаб. А вы развозите про transform и zoom. Человек не глупый и сам понимает, что не прокатит вариант с transform, о чем в вопросе и пишет.

[Rustam Bainazarov]

Сергей ZSA.

Вопрос был изначально не в том, "а можно ли зафигачить адаптивность только через transform"

Нет, именно в этом. Человек не хочет делать адаптивность, а хочет просто увеличить масштаб:


Т. е. вы хотите сказать, что постановка задачи в целом верна? И что так в целом стоит делать? Я не про средства, а про конечный итог — изменения масштаба в бóльшую сторону в случае наличия экрана бóльшего, чем контейнер сайта. Т. е. например, это правильно, что человек с 4К монитором и 100% масштабом ОС и браузера должен видеть вписанный в него контейнер сайта, рассчитанный максимум на 1024 px? Нет, конечно же.

Scale и zoom — сломанные костыли, которые никогда не заменят полноценный масштаб viewport даже на 000,1%, как, собственно, например, rem и em, но последние вообще для другого используются — для доступности, а не для решения подобной, неверной в своём корне, задаче. И это нельзя делать вообще никогда и ни с каким подходом, будь то vw, rem/em, scale или zoom.

Человек хочет быстро и неправильно, ломая основы адаптивности, доступности и нормального дизайна, учитывающего вышеуказанное. Так ещё и быстро. Я, предупредив его обо всём этом, указал два пути быстрого и неправильного решения его изначально неправильной задачи. И, как вы и сказали, человек неглупый и сам поймёт свою ошибку и неверность подхода.

[Анастасия]

Рустам Байназаров, WbICHA, вы вдвоём очень сильно заблуждаетесь. Особенно вы, Рустам.

И, поверьте, никто на 4К-мониторе не захочет видеть ваш сайт в 400% увеличении, как вы планируете.

А это бред редкостный, который ещё поискать нужно. Давайте начнём с того, что на 4к вы уже сидите с масштабированием (если нет, то тут должен быть мем из 50-и оттенков серого).

Адаптивность так никто не делает. Адаптивность — это не увеличение масштаба элементов в рамках одного класса устройств и настроек ОС. Это приведёт к тому, что на одном телефоне всё будет жутко мелкое, а на другом — жутко большое.

Я даже не знаю, как на ваши комментарии реагировать. Рустам, опять бред! Скажите, в каком месте я написала, что отказываюсь от media? Я просто хочу, чтобы сайт на 1920 выглядел также как и на 1024. И да, Рустам, это адаптивность.

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

ух! нельзя! может быть вы не знаете как? или всё-таки нельзя? или невозможно?

Вы сломаете визуальное восприятие сайта

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

Я понимаю, Рустам, вы молодец, куратор тега, но пожалуйста, не нужно больше ничего писать здесь. Я хочу дождаться утра и почитать ответы других пользователей, не ваши

Вернёмся к вопросу:
Возьмём тот же vk. Первоначальный дизайн - крайне плох, поэтому мне приходится делать масштабирование, чтобы он был чуть более юзабильным. То масштабирование (системное) по-сути полностью решает проблему: ничего не ломается, всё работает, выглядит так, как меня устраивает. Но вызвать я его не могу (хотя я не исключаю, что это как-то возможно. я пока не нашла решение)
Сергей ZSA,

разговоры разговаривать о том, как это сделать "колхозно быстро и дёшево".

да, я ищу быстрый и дешёвый способ. А если это колхозно, но будет работать, то это уже не колхозно, а действенно

[WbICHA]

Анастасия, я так и не понял в чём заблуждаюсь лично я?

[Анастасия]

WbICHA, вы просто под раздачу попали))) отнесла один из постов Рустама к вам. прошу прощения.

[Rustam Bainazarov]

Анастасия, например, у меня 32-дюймовый 4К монитор. Конечно же я сижу без масштаба. Более того, это стандартные параметры ОС Windows мне так сделали автоматом. Как будете решать эту задачу?

Скажите, в каком месте я написала, что отказываюсь от media? Я просто хочу, чтобы сайт на 1920 выглядел также как и на 1024. И да, Рустам, это адаптивность.

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

ух! нельзя! может быть вы не знаете как? или всё-таки нельзя? или невозможно?

К сожалению, Анастасия, я знаю, как сделать то, что вы хотите. Просто так никто не делает: верстаете всё на rem и em, а на нужных разрешения внезапно увеличиваете базовое значения размера шрифта, что пропорционально, идеально и без поломок увеличивает весь сайт. И да, я так делал, но только то была вёрстка журнала для выставки, а не массовый продукт.

Наверное я решаю, как я хочу, чтобы сайт открывался, а не пользователь?

Вас понял. Видимо, вы не занимались большим проектом. Пользователь решает очень многое.

Но вызвать я его не могу (хотя я не исключаю, что это как-то возможно. я пока не нашла решение)

Изменить масштаб окна браузера напрямую невозможно по очевидным причинам. Только в мобильных браузерах, если удалить мета-тег адаптивности, но это далеко не то, что нужно вам. Плюс, это негибко. «Непрямого» и быстрого метода увеличения масштаба всех элементов сайта без поломки системы координат и fixed (scale на body) или поломки вообще много чего (zoom) — нет. Только делать всё через медиазапросы и rem/em, как я сказал выше. Ну или на крайний случай vw (такое безумие тоже возможно).

[Анастасия]

например, у меня 32-дюймовый 4К монитор. Конечно же я сижу без масштаба.

фото в студию со своего рабочего места, как у вас выглядит vk и toster (спойлер: нифига не видно)

[Ankhena]

Анастасия,

фото в студию со своего рабочего места, как у вас выглядит vk и toster (спойлер: нифига не видно)

Справедливости ради Тостер и ВК не видно и на других мониках со 100% масштабом, если пользователю не 18 и он не орел с его зрением. Надеюсь, вы поняли о чем я.

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

Ради той же справедливости, я тоже не увеличиваю масштаб в системе. Но есть рабочий браузер со 100% масштабом и браузер для чтения. И было бы хорошо, если бы увеличение размера шрифта в браузере приводило к корректному отображению сайтов, но в большинстве случаев это не так. Поэтому, остается только масштаб в браузере.

Наверное я решаю, как я хочу, чтобы сайт открывался, а не пользователь?

Зависит от того, какую ценность для вас представляют пользователи, какая цель сайта и есть ли альтернативные сайты.
Художнику может быть важно показать именно так, как он задумал.
А вот у интернет-магазов обычно другие цели. И если владелец считает что должно быть так, как мне неудобно и я не могу исправить этого и это не монополист, то пойду искать другой сервис.

Вашим вариантом может быть переход на vw при размере вьюпорта больше ~1200 (подставьте нужное) и calc. Можно и без calc, если считаете, что всякие бордеры-полоски тоже должны увеличиваться.
Правда, это не 1,5 строчки. Хотя, при лаконичной верстке может оказаться, что не так и много нужно переписывать/пересчитывать, особенно при использовании кастомных свойств.

Вариант с rem написали выше.

Но и варианты с масштабом или всё на vw или на rem - нельзя назвать хорошими.
Вы получите резину, но не адаптив. А scale еще и подразмазать может.

Ведь цель-то у людей, обычно, видеть текст и попадать по интерактивным элементам. При этом, им не нужно увеличение картинок и подобных украшалок. (Картинки разумнее увеличивать отдельно, при клике на них.)
А это адаптив с кучкой media, а не резина.

Но, сайт действительно ваш и решать вам.

Answer 1

[Сергей ZSA]

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

Да, будет много @media, в частности сейчас у нас на проекте 21 media с изменениями размера шрифта, а все размеры полностью в rem и сайт резиновый.

Да, это долбеж с размерами шрифта, да есть нюансы с выстраиванием некоторых элементов, но это вполне реально и сайт выглядит правильно. Хочется прям что-то дико огромное типа 8k – пожалуйста, просто больше @media.

По итогу ваша задача – выбрать нужные размеры для всех разрешений, посмотреть, на каких @media нужно менять размер шрифта и на какое значение (шаг в px у нас к примеру иногда 2 иногда 1.5 иногда 1).

Если хочется пример – ну вот такой балаган будет:
Хотите вы с этим возиться? Если да – то видимо вам хорошо платят за это, но за 100k я б таким не морочился.

Comments

[Анастасия]

в том-то и дело, я не хочу морочиться, поэтому и хочется: пару тройку строк и пользователь на 1920 видит тоже самое, что и пользователь на 1024

[Сергей ZSA]

Анастасия, не мучиться не получится)) Так css не умеет. Вам придется либо работать с rem, либо em, либо vw, как бы этого не хотелось. Поэтому мало кто делает такие сайты, иначе бы их клепали налево и направо))

Answer 2

[ThunderCat]

возможно вам надо плясать от этого: https://stackoverflow.com/questions/24209628/how-t...

Comments

[Анастасия]

так это вроде только мобилок касается. через meta нельзя дёргать viewport браузера компьютера (наверное)

[ThunderCat]

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

[Анастасия]

ThunderCat, ну я сейчас перепроверила. не меняется ничего. так что не подходит вариант

Answer 3

[tundramani]

сделай весь контент в КОНТЕЙНЕРЕ с фиксированными размерами
например для фул хд это: 960х540 цсс пикселей

в этом контейнере сделай прокрутку

и вызывай эту функцию при начальной загрузке и при изменении размера экрана:

var адаптировать_размер = function()
	{

		var ширина = document.body.clientWidth
		var высота = document.body.clientHeight

		if(высота >= ширина)
			{
				var отношение = ширина / 960
				КОНТЕЙНЕР.style.transform = "scale("+ отношение +")"
			}
		else
			{	
				var соотношение = ширина / высота
				if(соотношение > 1.77)
				{
					var отношение = высота / 540
					КОНТЕЙНЕР.style.transform = "scale("+ отношение +")"

				}
				else
				{
					var отношение = ширина / 960
					КОНТЕЙНЕР.style.transform = "scale("+ отношение +")"
				}
			}
	}

стили:

body 
  { 
    position: fixed;    
    bottom: 0px;
    left: 0px;
display: flex;
justify-content: center;
align-items: center;
}
#КОНТЕЙНЕР
	{
		width: 960px;
		height: 540px;
		flex-shrink:0; 
	}

в итоге контейнер будет всегда в центре экрана и занимает всю ширину экрана