Ширина окна браузера Js
Обновлено: 03.07.2024
Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокручиваемую часть? Как мы прокручиваем страницу с помощью JavaScript?
Для этого типа информации мы можем использовать корневой элемент документа document.documentElement , соответствующий тегу. Но есть дополнительные методы и особенности, которые следует учитывать.
Ширина/высота окна
Чтобы получить ширину и высоту окна, мы можем использовать clientWidth/clientHeight для document.documentElement:
Например, эта кнопка показывает высоту вашего окна:
Браузеры также поддерживают такие свойства, как window.innerWidth/innerHeight . Они выглядят так, как нам нужно, так почему бы не использовать их вместо этого?
Если полоса прокрутки существует и занимает какое-то место, clientWidth/clientHeight предоставляет ширину/высоту без нее (вычитает ее). Другими словами, они возвращают ширину/высоту видимой части документа, доступной для содержимого.
window.innerWidth/innerHeight включает полосу прокрутки.
Если есть полоса прокрутки, и она занимает какое-то место, то эти две строки показывают разные значения:
В большинстве случаев нам нужна доступная ширина окна, чтобы рисовать или размещать что-либо внутри полос прокрутки (если они есть), поэтому мы должны использовать documentElement.clientHeight/clientWidth .
Обратите внимание: свойства геометрии верхнего уровня могут работать немного иначе, если их нет в HTML. Странные вещи возможны.
В современном HTML мы всегда должны писать DOCTYPE .
Ширина/высота документа
Теоретически, поскольку корневым элементом документа является document.documentElement и он заключает в себе все содержимое, мы можем измерить полный размер документа как document.documentElement.scrollWidth/scrollHeight.
Но для этого элемента и для всей страницы эти свойства не работают должным образом. В Chrome/Safari/Opera, если нет прокрутки, documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight! Странно, правда?
Чтобы надежно получить полную высоту документа, мы должны взять максимальное из следующих свойств:
Почему так? Лучше не спрашивай. Эти несоответствия исходят из древних времен, а не из «умной» логики.
Получить текущую прокрутку
Элементы DOM имеют текущее состояние прокрутки в своих свойствах scrollLeft/scrollTop.
Для прокрутки документа document.documentElement.scrollLeft/scrollTop работает в большинстве браузеров, за исключением более старых браузеров на основе WebKit, таких как Safari (ошибка 5991), где мы должны использовать document.body вместо document.documentElement .
К счастью, нам вообще не нужно помнить об этих особенностях, потому что прокрутка доступна в специальных свойствах, window.pageXOffset/pageYOffset :
Эти свойства доступны только для чтения.
По историческим причинам существуют оба свойства, но они одинаковы:
- window.pageXOffset является псевдонимом window.scrollX .
- window.pageYOffset является псевдонимом window.scrollY .
Прокрутка: scrollTo, scrollBy, scrollIntoView
Чтобы прокручивать страницу с помощью JavaScript, ее модель DOM должна быть полностью построена.
Например, если мы попытаемся прокрутить страницу с помощью скрипта в , это не сработает.
Обычные элементы можно прокручивать, изменяя scrollTop/scrollLeft .
То же самое можно сделать для страницы, используя document.documentElement.scrollTop/scrollLeft (кроме Safari, где вместо этого следует использовать document.body.scrollTop/Left).
В качестве альтернативы есть более простое универсальное решение: специальные методы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).
Метод scrollBy(x,y) прокручивает страницу относительно ее текущей позиции. Например, scrollBy(0,10) прокручивает страницу на 10 пикселей вниз.
Кнопка ниже демонстрирует это:
Метод scrollTo(pageX,pageY) прокручивает страницу до абсолютных координат, так что левый верхний угол видимой части имеет координаты (pageX, pageY) относительно левого верхнего угла документа. угол. Это похоже на установку scrollLeft/scrollTop .
Для прокрутки в самое начало мы можем использовать scrollTo(0,0) .
Эти методы работают одинаково во всех браузерах.
прокрутить в вид
Для полноты картины рассмотрим еще один метод: elem.scrollIntoView(top).
Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы сделать элемент видимым. У него один аргумент:
- Если top=true (это значение по умолчанию), страница будет прокручиваться, чтобы элемент elem отображался в верхней части окна. Верхний край элемента будет выровнен с верхом окна.
- Если top=false , страница прокручивается так, чтобы элемент elem отображался внизу. Нижний край элемента будет выровнен по низу окна.
Кнопка ниже прокручивает страницу, чтобы оказаться в верхней части окна:
И эта кнопка прокручивает страницу, чтобы оказаться внизу:
Запретить прокрутку
Иногда нам нужно сделать документ «непрокручиваемым». Например, когда нам нужно покрыть страницу большим сообщением, требующим немедленного внимания, и мы хотим, чтобы посетитель взаимодействовал с этим сообщением, а не с документом.
Чтобы сделать документ непрокручиваемым, достаточно задать document.body.style.overflow = "hidden" . Страница «зависнет» в текущей позиции прокрутки.
Первая кнопка останавливает прокрутку, а вторая отпускает ее.
Мы можем использовать ту же технику, чтобы заморозить прокрутку для других элементов, а не только для document.body .
Недостаток этого метода в том, что полоса прокрутки исчезает. Если он занимал какое-то место, то это место теперь свободно, и контент «прыгает», чтобы заполнить его.
Чтобы определить, находится ли окно браузера в альбомной или книжной ориентации, можно сравнить ширину и высоту окна браузера.
Но по моему опыту, легко запутаться в куче размеров: размеры экрана, окна, веб-страницы.
Как определяются эти размеры и, что важно, как получить к ним доступ, я собираюсь обсудить в этом посте.
Содержание
1.1 Размер экрана
Размер экрана — это ширина и высота экрана: монитора или мобильного экрана.
window.screen — это объект, содержащий информацию о размере экрана. Вот как получить доступ к ширине и высоте экрана:
1.2 Доступный размер экрана
Доступный размер экрана состоит из ширины и высоты активного экрана без панелей инструментов операционной системы.
Чтобы получить доступ к доступному размеру экрана, вы можете снова использовать объект window.screen:
2.1 Внешний размер окна
Внешний размер окна состоит из ширины и высоты всего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Чтобы получить доступ к размеру внешнего окна, вы можете использовать свойства externalWidth и externalHeight, которые доступны непосредственно в объекте окна:
2.2 Внутренний размер окна
Внутренний размер окна (он же размер области просмотра) состоит из ширины и высоты области просмотра, в которой отображается веб-страница.
объект окна предоставляет необходимые свойства innerWidth и innerHeight:
Если вы хотите получить доступ к внутреннему размеру окна без полос прокрутки, вы можете использовать следующее:
<р>3. Размер веб-страницыРазмер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.
Используйте следующее, чтобы получить доступ к размеру содержимого веб-страницы (включая заполнение страницы, но не границы, поля или полосы прокрутки):
Если pageHeight больше внутренней высоты окна, отображается вертикальная полоса прокрутки.
Надеюсь, теперь вы лучше понимаете, как определять разные размеры.
Размер экрана – это размер всего экрана (или монитора), а доступный размер экрана – это размер монитора без учета панелей задач или панелей инструментов ОС.
Внешний размер окна измеряет все окно браузера (включая адресную строку, панель вкладок и боковые панели, если они открыты), а внутренний размер окна — размер область просмотра, в которой отображается веб-страница.
Получить текущую вычисленную ширину для первого элемента в наборе совпадающих элементов или установить ширину каждого совпадающего элемента.
Содержание:
.width() возвращает: число
Описание: получение текущей вычисленной ширины для первого элемента в наборе совпадающих элементов.
добавлена версия: 1.0 .width()
Разница между .css( "width" ) и .width() заключается в том, что последний возвращает значение без единиц измерения в пикселях (например, 400 ), а первый возвращает значение с целыми единицами измерения (например, 400px ). . Метод .width() рекомендуется, когда необходимо использовать ширину элемента в математических вычислениях.
Рисунок 1. Иллюстрация измеренной ширины
Этот метод также позволяет определить ширину окна и документа.
Обратите внимание, что .width() всегда возвращает ширину содержимого, независимо от значения свойства CSS box-sizing. Начиная с jQuery 1.8, для этого может потребоваться получить свойство CSS width plus box-sizing, а затем вычесть любые потенциальные границы и отступы для каждого элемента, если элемент имеет box-sizing: border-box . Чтобы избежать этого штрафа, используйте .css("width" ) вместо .width() .
Примечание. Хотя теги стиля и скрипта сообщают значение для .width() или height() при абсолютном позиционировании и заданном display:block , настоятельно не рекомендуется вызывать эти методы для этих тегов. Помимо плохой практики, результаты также могут оказаться ненадежными.
Дополнительные примечания:
- Число, возвращаемое API-интерфейсами, связанными с измерениями, включая .width() , в некоторых случаях может быть дробным. Код не должен предполагать, что это целое число. Кроме того, размеры могут быть неверными, когда пользователь масштабирует страницу; браузеры не предоставляют API для обнаружения этого условия.
- Не гарантируется, что значение, сообщаемое функцией .width(), будет точным, если элемент или его родитель скрыты. Чтобы получить точное значение, перед использованием .width() убедитесь, что элемент виден. jQuery попытается временно отобразить, а затем повторно скрыть элемент, чтобы измерить его размеры, но это ненадежно и (даже если оно точное) может значительно повлиять на производительность страницы. Эта функция отображения и повторного скрытия измерений может быть удалена в будущей версии jQuery.
Пример:
Показать различную ширину. Обратите внимание, что значения взяты из iframe, поэтому они могут быть меньше, чем вы ожидали. Желтая подсветка показывает тело iframe.
.width(значение) Возвращает: jQuery
Описание: установка ширины CSS для каждого элемента в наборе соответствующих элементов.
добавлена версия: 1.0 .width(значение)
Целое число, представляющее количество пикселей, или целое число с дополнительной единицей измерения (в виде строки).
добавлена версия: 1.4.1 .width( функция )
Функция, возвращающая ширину для установки. Получает позицию индекса элемента в наборе и старую ширину в качестве аргументов. Внутри функции это относится к текущему элементу в наборе.
При вызове .width("value") значение может быть либо строкой (число и единица измерения), либо числом. Если для значения предоставлено только число, jQuery принимает единицу измерения в пикселях. Однако если указана строка, для ширины можно использовать любое допустимое значение CSS (например, 100px , 50% или auto ). Обратите внимание, что в современных браузерах свойство CSS width не включает отступы, границы или поля, если только не используется свойство CSS box-sizing.
Если не указана явная единица измерения (например, "em" или "%"), предполагается "px".
Обратите внимание, что .width("value") задает ширину содержимого блока независимо от значения свойства CSS box-sizing.
Пример:
Измените ширину каждого элемента div при первом нажатии (и измените его цвет).
Ширина окна jquery, вам понадобится, если вы работаете с адаптивным дизайном и/или вам нужно определить ширину окна браузера? Вы используете адаптивный макет и область просмотра, но вам нужен способ определить ширину окна? jQuery width() и jQuery resize() могут помочь.
Адаптивный дизайн
Поскольку многие устройства имеют доступ к Интернету, адаптивный дизайн становится необходимостью. Смартфоны, планшеты, ноутбуки и настольные компьютеры имеют разные области просмотра. Viewport — это размер окна устройства. Мы будем использовать функции jquery width и resize для определения ширины окна на экране, что поможет нам в адаптивном дизайне.
Чтобы определить ширину окна браузера и изменить его размер, мы будем использовать:
- ширина jquery
- изменить размер jquery
- окно
Определение ширины окна jQuery
jQuery .width() возвращает только числовое значение, например 325. Значение в пикселях. Однако .css(width) вернет число и единицы измерения, то есть 325 пикселей. Мы хотим использовать ширину окна jQuery, так как позже мы проверим числовые значения.
Окно, документ или экран
Почему ширина окна? Окно «держит» документ. Поскольку документ — это то, что загружается в объект Window, мы будем использовать $(window).width(). Я также использую ширину окна jquery вместо ширины экрана. Если кто-то не развернул окно браузера на весь экран, имеет смысл получить только ширину используемого окна, а не экрана.
Изменение размера окна jQuery
Что произойдет, если изменить размер окна?К счастью, в jQuery есть функция для проверки изменения размера объекта. Приведенный ниже код покажет ширину окна при изменении размера.
Ширина окна jQuery
Приведенный ниже код будет использовать ширину окна jQuery для отображения исходной ширины экрана, но не после изменения размера.
Ширина окна jQuery
Приведенный ниже код будет использовать ширину окна jQuery для отображения исходной ширины экрана, но не после изменения размера.
Ширина окна jQuery определяется изначально и при изменении размера
Мы соберем все это здесь. Мы будем использовать ширину и размер окна jQuery, как мы делали выше. Ниже я предоставлю HTML-код для дальнейшей обработки.
Ширина окна jQuery HTML
Ниже приведен необходимый HTML. Мы используем приведенный выше код jQuery/javascript для управления приведенным ниже HTML-кодом.
Читайте также:
