Герб Укріїни
Віримо в Україну та ЗСУ. Слава Україні!

Зміна масштабу браузера для сайту на JavaScript для малих екранів

18.05.2023

Масштабування (зум) браузера є корисною функцією, яка дозволяє збільшувати або зменшувати розмір вмісту веб-сторінки. У цій статті ми розглянемо, як використовувати JavaScript для зміни масштабу браузера в певному діапазоні ширини вікна.

Навіщо це потрібно?

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

Як це працює?

Для зміни масштабу браузера за допомогою JavaScript ми будемо використовувати метод matchMedia, який перевіряє умову ширини вікна браузера. Якщо умова виконується, ми застосовуємо масштабування до елемента body. При цьому ми також додаємо обробник події resize, щоб масштабування автоматично оновлювалося при зміні розміру вікна.
Давайте розглянемо код по кроках:

1. Визначення функції setZoom()

Читайте також:  Як підігнати блоки в сітці по висоті, зробити їх однаковими, рівними

Ця функція перевіряє ширину вікна за допомогою методу matchMedia і встановлює відповідний масштаб для елемента body. У нашому прикладі, якщо ширина вікна знаходиться в діапазоні від 780 до 1280 пікселів, масштаб буде встановлено на 70%. У протилежному випадку, масштаб буде встановлено на 100%.

2. Виклик функції та обробка події resize

Ми викликаємо функцію setZoom() один раз при завантаженні сторінки, щоб встановити початкове масштабування. Потім ми додаємо обробник події resize, який викликає функцію setZoom() кожного разу, коли змінюється розмір вікна браузера.

Використання на вашому веб-сайті

Щоб використовувати цей скрипт на вашому веб-сайті, вам потрібно вставити його в HTML-код вашої веб-сторінки. Ось приклад, як включити скрипт на вашій сторінці:

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

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

Сподіваюся, що ця стаття допоможе вам зрозуміти, як використовувати скрипт для зміни масштабу браузера на вашому веб-сайті.

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *