Как изменить масштаб в браузере js
Обновлено: 07.07.2024
Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?
Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу <html> . Однако есть дополнительные методы и особенности, которые необходимо учитывать.
Ширина/высота окна
Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :
Например, эта кнопка показывает высоту вашего окна:
Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?
Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.
А window.innerWidth/innerHeight включают в себя полосу прокрутки.
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:
В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .
Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет <!DOCTYPE HTML> . Возможны странности.
В современном HTML мы всегда должны указывать DOCTYPE .
Ширина/высота документа
Теоретически, т.к. корневым элементом документа является documentElement , и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight .
Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight ! С точки зрения элемента это невозможная ситуация.
Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств:
Почему? Лучше не спрашивайте. Эти несоответствия идут с древних времён. Глубокой логики здесь нет.
Получение текущей прокрутки
Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop .
Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top , за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement .
К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset :
Эти свойства доступны только для чтения.
Прокрутка: scrollTo, scrollBy, scrollIntoView
Для прокрутки страницы из JavaScript её DOM должен быть полностью построен.
Например, если мы попытаемся прокрутить страницу из скрипта в <head> , это не сработает.
Обычные элементы можно прокручивать, изменяя scrollTop/scrollLeft .
Мы можем сделать то же самое для страницы в целом, используя document.documentElement.scrollTop/Left (кроме основанных на старом WebKit (Safari), где, как сказано выше, document.body.scrollTop/Left ).
Есть и другие способы, в которых подобных несовместимостей нет: специальные методы window.scrollBy(x,y) и window.scrollTo(pageX,pageY) .
Метод scrollBy(x,y) прокручивает страницу относительно её текущего положения. Например, scrollBy(0,10) прокручивает страницу на 10px вниз.
Кнопка ниже демонстрирует это:
Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать scrollTo(0,0) .
Эти методы одинаково работают для всех браузеров.
scrollIntoView
Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).
Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:
- если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
- если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.
Кнопка ниже прокрутит страницу так, что она сама окажется вверху:
А следующая кнопка прокрутит страницу так, что она сама окажется внизу
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = "hidden" .
Первая кнопка останавливает прокрутку, вторая возобновляет её.
Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body .
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Можно ли определить, используя JavaScript, когда пользователь меняет масштаб страницы? Я просто хочу поймать событие "zoom" и ответить на него (похоже на событие window.onresize).
Невозможно активно определить, есть ли зум. Я нашел хорошую запись здесь о том, как вы можете попытаться ее реализовать.
Невозможно определить, масштабируется ли страница, если они загружают вашу страницу при увеличении.
Протестировано с Chrome, Firefox 3.6 и Opera, а не с IE.
С уважением, Магнус
Это работает для меня:
Это нужно только для IE8. Естественно, что все другие браузеры генерируют событие изменения размера.
Существует отличный плагин, построенный из yonran , который может выполнять обнаружение. Вот его предыдущий вопрос ответил на StackOverflow. Он работает для большинства браузеров. Приложение так же просто, как это:
Я хотел бы предложить усовершенствование предыдущего решения с отслеживанием изменений ширины окна. Вместо того, чтобы хранить собственный массив прослушивателей событий, вы можете использовать существующую систему событий javascript и запускать собственное событие при изменении ширины и связывать с ним обработчики событий.
Throttle/debounce может помочь с уменьшением скорости вызовов вашего обработчика.
Вы также можете получить события изменения размера текста и коэффициент масштабирования, введя div, содержащий по крайней мере неразрывное пространство (возможно, скрытое) и регулярно проверяя его высоту. Если высота изменяется, размер текста изменился (и вы знаете, сколько - это также срабатывает, кстати, если окно будет увеличено в полностраничном режиме, и вы все равно получите правильный коэффициент масштабирования с одинаковой высотой/высота).
В iOS 10 можно добавить прослушиватель событий в событие touchmove и обнаружить, если страница будет увеличена с помощью текущего события.
Хотя это 9-летний вопрос, проблема сохраняется!
Я обнаружил изменение размера, исключая масштабирование в проекте, поэтому я отредактировал свой код, чтобы он работал, чтобы обнаруживать как изменение размера, так и масштабирование эксклюзивно друг от друга. Он работает большую часть времени, поэтому, если большинство из них достаточно хороши для вашего проекта, тогда это должно быть полезно! Он обнаруживает масштабирование в 100% случаев в том, что я тестировал до сих пор. Единственная проблема заключается в том, что если пользователь становится сумасшедшим (т.е. Спасительно изменяет размер окна) или отстает от окна, он может стрелять как зум, а не изменять размер окна.
Он работает, обнаруживая изменение в window.outerWidth или window.outerHeight как изменение размера окна при обнаружении изменения в window.innerWidth или window.innerHeight независимо от изменения размера окна в качестве масштабирования.
Примечание. Мое решение похоже на KajMagnus, но для меня это улучшилось.
Я отвечаю на 3-летнюю ссылку, но я думаю, что здесь более приемлемый ответ,
Создайте файл .css as,
Приведенный выше код делает размер шрифта "10px" при увеличении экрана примерно до 125%. Вы можете проверить различные уровни масштабирования, изменив значение "1000px".
Как автоматически определить разрешение экрана и изменить масштаб браузера с помощью Javascript?
Я думал о чем-то более подобном:
У меня есть следующий код:
Моя точка зрения: я сделал это для экранов шириной не менее 1280 пикселей.
Я хочу, чтобы кто-то мог написать код, который я мог бы использовать для переключения файла CSS после просмотра на экране < 1280px - их, я мог бы сделать что-то вроде:
спросил(а) 2010-07-06T14:16:00+04:00 11 лет, 4 месяца назад.item img < width: 80%; >, а затем результат будет таким же, как "уменьшение масштаба браузера".
Автоматическое определение разрешения экрана
ответил(а) 2010-07-06T14:19:00+04:00 11 лет, 4 месяца назадизменить масштаб браузера с помощью javascript
Если вы имеете в виду изменение собственного масштабирования браузера, вызванного CTRL +/-, тогда это невозможно. Вы можете настроить свойства CSS/применять таблицы стилей, но вы не можете влиять на собственные элементы управления браузером. Существуют только варианты CSS только здесь, в зависимости от вашей целевой аудитории (и их выбора браузера), используя медиа-запросы, пару примеров здесь и здесь. Если они не подходят, вы можете делать различные вещи с помощью JavaScript для определения ширины/высоты экрана и соответственно корректировать.
ответил(а) 2010-07-06T14:18:00+04:00 11 лет, 4 месяца назад ответил(а) 2013-05-18T14:49:00+04:00 8 лет, 6 месяцев назадВопрос совершенно возможен и действует на нашем сайте здесь:
JS определяет ширину экрана и уменьшает или немного приближает содержимое к экрану.
Кроме того, если пользователь изменяет размер окна, активируется зум.
Это фактически помогает размещать контент на экранах и экранах размером с планшеты размером с iphone без добавления дополнительных таблиц стилей или для обнаружения ОС/браузера.
- check_window_size (windowWidth, 1, bsr, bsr_ver); bsr и bsr_ver обнаруживаются с использованием класса php.
Как вы можете видеть, мы также перемещаем несколько элементов, которые не находились в области содержимого div.
Colmask - это содержащий div для большей части содержимого страниц (для нас, который находится под заголовком, поэтому мы перемещаем некоторые элементы вручную)
Возможность масштабировать элементы страницы и детально рассматривать их – это очень крутой пользовательский опыт. Существует множество готовых библиотек с подобной функциональностью, но сегодня мы напишем собственный велосипед на чистом JavaScript! Зачем?
- Сторонние решения часто предлагают избыточную функциональность, которая вам не нужна, но бандл приложения увеличивает.
- К тому же это замечательный челлендж, который расшевелит ваш мозг и прокачает навыки программирования.
В результате мы получим очень маленькую (всего 69 строчек кода!), простую и удобную библиотечку для масштабирования и панорамирования.
Разметка и стили
Внутри рабочей области находятся несколько элементов, которые не несут никакой смысловой нагрузки, а просто предназначены для демонстрации работы кода.
Добавим также немного стилей для оформления страницы:
Для body устанавливаем overflow: hidden . Это нужно, чтобы избежать переполнения страницы и появления прокрутки при чрезмерном увеличении элемента.
Также добавим рамку для визуального обозначения рабочей области ( .area ) и немного облагородим демо-контент (классы .circle , .rectangle и .text-area ).
Скрипт библиотеки
Код самой библиотеки будет располагаться в файле renderer.js . Экспортируем из модуля главную функцию renderer :
Она принимает базовые параметры:
- minScale – минимальный масштаб;
- maxScale – максимальный масштаб;
- element – DOM-элемент, с которым будут производиться манипуляции;
- scaleSensitivity – коэффициент чувствительность масштабирования, по умолчанию 10.
В замыкании функции создается объект состояния – state , который хранит настройки и совершенные над элементом преобразования (поле transformation ).
Из функции возвращается объект с набором методов. При этом возможности масштабирования и панорамирования разделены на отдельные функции-конструкторы – makeZoom и makePan , которые мы разберем чуть позже. Конструкторы получают общий объект состояния и возвращают отдельный набор методов для взаимодействия с ним.
Такой подход называется композицией и позволяет проще добавлять новую функциональность и легче тестировать приложение.
Трансформации
Все манипуляции с элементом будут производиться через изменение свойства transform . Для этого используем CSS-функцию matrix , которой нужно передать правильные параметры масштаба ( scale ) и сдвига ( translateX и translateY ):
Вспомогательная функция getMatrix просто формирует шаблонную строку правильного формата, которую нужно установить в свойство style.transform элемента.
Панорамирование
При панорамировании должно изменяться положение элемента на странице, то есть производиться его сдвиг. Функция pan принимает текущее состояние элемента ( state ), а также новые координаты. Затем она обновляет состояние, прибавляя новый сдвиг к текущему положению и обновляет свойство style элемента.
Теперь реализуем два метода:
- panBy – простой сдвиг на указанные координаты;
- panTo – сдвиг с одновременным масштабированием.
При сдвиге с масштабированием координаты элемента нужно скорректировать.
Масштабирование
Для изменения размера элемента нам потребуется несколько вспомогательных функций для расчетов:
Метод getScale рассчитывает новый масштаб на основе предыдущего значения, минимального и максимального ограничений ( minScale , maxScale ) и коэффициентов ( scaleSensitivity , deltaScale ).
Метод getTranslate рассчитывает новый сдвиг на основе масштаба и текущей и предыдущей позиции.
А вот и реализация функции makeZoom :
Она возвращает только один метод zoom , предназначенный для масштабирования элемента. Он получает координаты курсора, а также параметр deltaScale – коэффициент, который определяет направление масштабирования ( 1 для увеличения, -1 для уменьшения).
Функция вычисляет новые параметры трансформации и обновляет свойство style элемента.
При масштабировании кроме style.transform нужно изменять также свойство style.transformOrigin , чтобы скорректировать позицию элемента. В качестве эксперимента вы можете закомментировать 14 строчку и посмотреть, что будет.
Главный файл
Кроме того мы сделаем главный файл приложения index.js :
Клиентский код создает экземпляр renderer и передает ему базовую конфигурацию:
- элемент, размер которого будет изменяться;
- минимальный и максимальный масштаб;
- коэффициент чувствительности масштабирования.
Затем устанавливаются слушатели событий мыши и в нужный момент вызываются нужные методы:
- для масштабирования используйте колесико мыши или сенсорную панель, зажав клавишу CTRL.
- для перемещения – перемещайте мышь или используйте тачпад, зажав клавишу SHIFT.
- Двойной щелчок мыши восстановит исходное состояние элемента.
Тестирование
Проверим реализованные функции с помощью библиотеки Mocha:
Перед каждым тестом ( beforeEach ) создается объект _element с дефолтными значениями.
Кейсы тестирования для удобства вынесены в отдельный файл renderer.testCases.js .
В итоге у нас получился очень простой и удобный инструмент для масштабирования и панорамирования на JavaScript, состоящий всего из 69 строк кода. Его можно сократить больше, но не хочется терять читабельность.
Читайте также: