Чому ваш сайт “ламається” при масштабуванні 125% і 150% — пояснюємо дизайнерською мовою

1. Що таке масштабування 125% і 150% у Windows і чому це важливо

Якщо ти відкривав макет сайту на своєму ноутбуці, а потім — той самий сайт у браузері, і ловив себе на думці: “Чому все виглядає більше/інакше?”, — знай, ти не один. Причина в системному масштабуванні, яке сьогодні використовує більшість сучасних пристроїв.

Уяви звичайний ноутбук на Windows із екраном 15.6″ та роздільною здатністю Full HD (1920×1080). Через високу щільність пікселів (PPI), елементи інтерфейсу виглядають дуже дрібними. Щоб зробити їх читабельними, система автоматично застосовує масштабування 125% або 150%.

І це не просто “збільшення”, як у зумі — це перерахунок розмірів усіх елементів, включно з шрифтами, кнопками, відступами. Але при цьому роздільна здатність залишається 1920px, і саме тому дизайнери часто потрапляють у пастку: те, що виглядає ідеально у Figma, в реальності — може вийти за межі екрану або здаватися гігантським.

2. Як масштабування впливає на реальне відображення сайту

Отже, маємо ноутбук із Full HD (1920×1080) і масштабуванням 125%. Начебто, все повинно виглядати звично. Але в реальності користувач бачить менший viewport — не 1920 пікселів, як у макеті, а близько 1536 px.

Тобто сайт, який ти спроєктував на ширину 1920px, вже не вміщується у вікно перегляду без горизонтального скролу або “стиснення”. І саме тому:

• Контент виглядає більшим, ніж задумано.
• Сітка “ламається” або стає надто щільною.
• Медіа-запити в CSS не спрацьовують так, як ти очікував.

Чому так відбувається?
Браузер не “бачить” системне масштабування як зміну роздільної здатності — він рендерить сайт з урахуванням фізичного viewport-а. І цей viewport вже менший, ніж ти очікував, бо система збільшила інтерфейс для користувача.

Це ніби ти дивишся через вікно, яке хтось звузив — ти все ще малюєш пейзаж на великому полотні, але бачиш лише його частину.

3. Чому класичний підхід “макет на 1920px” більше не працює

Раніше все було просто: дизайнер відкривав Figma, ставив артборд на 1920px ширини і спокійно будував дизайн під десктоп. Але часи змінилися — і сьогодні 1920 пікселів у макеті не гарантують, що користувач побачить сайт саме так.

Ось чому це вже не працює:

• Масштабування системи (125–150%) зменшує фактичний viewport. Наприклад, при 150% масштабі Full HD перетворюється в 1280px ширини. І твій “ідеальний” сайт на 1920px просто не влізає.
• Користувачі рідко дивляться сайт у повноекранному режимі. У браузері часто відкриті вкладки, панель закладок, а ще хтось працює з двома вікнами одночасно. Тобто, навіть на 1920-моніторі сайт може бачитися в 1600px або навіть 1400px.
• Сучасні екрани = різні DPI та формати. В одного 24-дюймовий FullHD, в іншого — 13-дюймовий 4K. І все це змінює сприйняття масштабу інтерфейсу.

Що з цим робити?

• Відмовлятися від фіксованого підходу “десктоп = 1920”.
• Переходити на адаптивний підхід з гнучкими сітками та використанням vw — про це й поговоримо в наступному блоці.

4. Рішення: перехід до адаптивності через vw

Коли ми говоримо про адаптивний дизайн, більшість одразу уявляє медіазапити (@media) і десятки брейкпоінтів. Але є більш гнучке рішення — використання vw (viewport width).

Що таке vw?

• 1vw = 1% ширини видимого вікна браузера (viewport).
• Тобто, якщо ширина вікна 1280px, то 1vw = 12.8px.
• І незалежно від роздільної здатності чи масштабування системи — vw завжди реагує на фактичну ширину, яку бачить користувач.

Переваги vw для дизайну:

• Реальна адаптивність — елементи змінюються разом із вікном браузера.
• Мінус залежності від “1920” — ти проектуєш під живу ширину, а не уявну.
• Краще відображення при масштабуванні 125–150%, бо все підлаштовується автоматично.
• Менше медіа-запитів, бо все масштабується плавно.

Типові приклади використання:

Контейнер:

css.container {
  width: 90vw;
  max-width: 1280px;
  margin: 0 auto;
}

Типографіка:

css{
  font-size: calc(1.2rem + 1.5vw);
}

Або ще крутіше — з clamp():

css{
  font-size: clamp(1.5rem, 2vw, 3rem);
}

Це дозволяє задати межі, щоб шрифт не став надто малим або надто великим.

Для Figma теж працює!

Ти можеш мислити в “відсотках” або створювати компоненти з Auto Layout і адаптивною шириною. У поєднанні з Live Preview або плагінами для перегляду на різних екранах — це дає чудовий результат.

5. Як правильно будувати макети, щоб не потрапити в пастку масштабування

Коли ти вже усвідомлюєш, що 1920px — це не абсолют, а лише одна з багатьох умовностей, настає час перейти до практики. І ось кілька порад, як будувати макети, які будуть виглядати добре на будь-якому масштабі, будь-якому екрані.

1. Працюй у 100% масштабі у Figma

• Використовуй Ctrl+1 / Cmd+1, щоб побачити реальний розмір елементів (actual size).
• Якщо збільшиш або зменшиш — у тебе буде спотворене уявлення про пропорції.

2. Створюй макети з урахуванням viewport-а, а не “віртуальних” пікселів

• Робоча ширина артбордів:
  • 1440px — зручна для більшості десктопів
  • 1280px — хороший реальний viewport при 125–150% масштабуванні
  • 768px — для планшетів
  • 375px — для мобілок

Не обов’язково стартувати з 1920px. Реальність користувача — менша.

3. Використовуй auto layout і відсоткові значення

• Привчай себе не “забивати” фіксовані ширини (типу 1200px), а використовувати гнучкі компоненти.
• Figma підтримує “Fill container”, “Hug contents” — це прямо про адаптивність.

4. Тестуй у браузері:

• Chrome DevTools → “Toggle device toolbar” → виставляй різні розміри вікна.
• Там же можеш бачити viewport width в реальному часі.
• Встанови розширення типу Window Resizer — і зможеш швидко перемикатись між ширинами вікна.

5. Ідеально — перевірка на реальному Full HD екрані

• Якщо маєш змогу — під’єднай до ноуту зовнішній монітор 1920×1080 без масштабування.
• Або відкривай сайт у вікні фіксованої ширини, щоб бачити, як це буде в користувача.

Усе це — не про “підігнати”, а про думати ширше: ти створюєш інтерфейс, який має працювати скрізь. І твоя зброя — не пікселі, а логіка поведінки.

6. Приклади використання vw у CSS

Окей, теорія — це чудово. Але давай покажу, як це виглядає в коді, щоб ти одразу міг застосовувати це у своїх проєктах (або передати розробникам).

Контейнер з vw та max-width

css.container {
  width: 90vw;             /* займає 90% ширини viewport */
  max-width: 1280px;       /* але не більше певної межі */
  margin: 0 auto;          /* вирівнювання по центру */
  padding: 0 20px;         /* невеликий внутрішній відступ */
}

Цей підхід дозволяє блоку адаптуватись до екрана, але не ставати надто широким на великих моніторах.

Адаптивна типографіка з calc()

css{
  font-size: calc(1.2rem + 1.5vw); /* росте разом з екраном */
  line-height: 1.2;
}

Ідеально для заголовків — вони завжди виглядають пропорційно.

Або з clamp() — ще гнучкіше

css{
  font-size: clamp(1.5rem, 2vw, 3rem);
}

• 1.5rem — мінімальний розмір на маленьких екранах.
• 2vw — динамічна частина.
• 3rem — обмеження, щоб не було занадто велике.

Це сучасний і дуже стабільний спосіб зробити шрифти “живими”.

Кнопка, що адаптується до ширини:

css{
  padding: 0.6em 2vw;
  font-size: clamp(14px, 1.2vw, 18px);
}

Горизонтальний відступ секції

css{
  padding-left: 5vw;
  padding-right: 5vw;
}

Ніяких “container-fluid”, просто — “дай простору по краях завжди, незалежно від ширини”.

І трохи магії для background:

css.hero {
  background-size: 100vw auto;
}

Такі дрібниці створюють живий, гнучкий дизайн, який не боїться, що користувач змінить масштаб браузера або відкриє сайт на ультра-широкому моніторі.

7. Висновки для дизайнерів і розробників

Масштабування 125%, 150% чи навіть 175% — це не виняток, а норма сьогоднішніх користувачів. І якщо раніше можна було проігнорувати ці нюанси, то зараз ігнорування реального viewport-а — це втрата якості дизайну.

Отже, що важливо пам’ятати:

Фіксована ширина 1920px більше не гарантує реалістичне відображення.

• Viewport width (vw) — твоє нове “універсальне полотно”, яке враховує все: розмір вікна, DPI, масштабування.
• Figma, CSS, браузери — всі мають інструменти, щоб тестити й адаптувати дизайн правильно. Головне — знати, як.

Мисли не пікселями — а логікою адаптації.

Інтерфейс має не просто “влізати” в екран — він має працювати на будь-якому екрані: виглядати гарно, бути зручним, не ламатись і не викликати питань типу: “А чого в мене сайт не влазить?“.

І саме для цього існує правильна комбінація:

• гнучка сітка
• vw
• clamp()
• і любов до користувача — бо дизайн не про пікселі, а про досвід.

Ти — дизайнер майбутнього. І майбутнє вимагає, щоб інтерфейси підлаштовувались, а не ламались. Тож нехай твій наступний проєкт буде не просто гарним, а ще й розумним.

Ви теж щойно пробурмотіли “трястя”? Тоді саме час довірити адаптивність тим, хто дружить із vw і магією CSS.