Масштабування (зум) браузера є корисною функцією, яка дозволяє збільшувати або зменшувати розмір вмісту веб-сторінки. У цій статті ми розглянемо, як використовувати JavaScript для зміни масштабу браузера в певному діапазоні ширини вікна.
Навіщо це потрібно?
Зміна масштабу браузера може бути корисною, коли ви хочете оптимізувати відображення вашого веб-сайту на різних пристроях та екранах. Наприклад, ви можете бажати встановити певний масштаб для середнього розміру екранів, щоб покращити зручність читання та візуальне сприйняття на таких пристроях.
Як це працює?
Для зміни масштабу браузера за допомогою JavaScript ми будемо використовувати метод matchMedia, який перевіряє умову ширини вікна браузера. Якщо умова виконується, ми застосовуємо масштабування до елемента body. При цьому ми також додаємо обробник події resize, щоб масштабування автоматично оновлювалося при зміні розміру вікна.
Давайте розглянемо код по кроках:
1. Визначення функції setZoom()
1 2 3 4 5 6 7 | function setZoom() { if (window.matchMedia('(min-width: 780px) and (max-width: 1280px)').matches) { document.body.style.zoom = "70%"; } else { document.body.style.zoom = "100%"; } } |
Ця функція перевіряє ширину вікна за допомогою методу matchMedia і встановлює відповідний масштаб для елемента body. У нашому прикладі, якщо ширина вікна знаходиться в діапазоні від 780 до 1280 пікселів, масштаб буде встановлено на 70%. У протилежному випадку, масштаб буде встановлено на 100%.
2. Виклик функції та обробка події resize
1 2 | setZoom(); window.addEventListener('resize', setZoom); |
Ми викликаємо функцію setZoom() один раз при завантаженні сторінки, щоб встановити початкове масштабування. Потім ми додаємо обробник події resize, який викликає функцію setZoom() кожного разу, коли змінюється розмір вікна браузера.
Використання на вашому веб-сайті
Щоб використовувати цей скрипт на вашому веб-сайті, вам потрібно вставити його в HTML-код вашої веб-сторінки. Ось приклад, як включити скрипт на вашій сторінці:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script type="text/javascript"> function setZoom() { if (window.matchMedia('(min-width: 780px) and (max-width: 1280px)').matches) { document.body.style.zoom = "70%"; } else { document.body.style.zoom = "100%"; } } // Вызываем функцию для установки масштаба при загрузке страницы setZoom(); // Обрабатываем событие изменения размера окна window.addEventListener('resize', setZoom); </script> |
Коли сторінка завантажиться, скрипт буде виконано і почне змінювати масштаб браузера відповідно до визначених умов.
Зверніть увагу, що при використанні цього скрипта зміна масштабу браузера відбувається тільки на боці клієнта, і користувачі зможуть змінити масштаб за допомогою стандартних засобів браузера, якщо це потрібно.
Сподіваюся, що ця стаття допоможе вам зрозуміти, як використовувати скрипт для зміни масштабу браузера на вашому веб-сайті.
Залишити відповідь