Get the width and height of the screen

Размеры и прокрутка окна

Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?

Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу . Однако есть дополнительные методы и особенности, которые необходимо учитывать.

Ширина/высота окна

Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :

Например, эта кнопка показывает высоту вашего окна:

Браузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?

Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.

А window.innerWidth/innerHeight включают в себя полосу прокрутки.

Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:

alert( window.innerWidth ); // полная ширина окна alert( document.documentElement.clientWidth ); // ширина окна за вычетом полосы прокрутки

В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в HTML нет . Возможны странности.

В современном HTML мы всегда должны указывать DOCTYPE .

Ширина/высота документа

Теоретически, т.к. корневым элементом документа является documentElement , и он включает в себя всё содержимое, мы можем получить полный размер документа как documentElement.scrollWidth/scrollHeight .

Но именно на этом элементе, для страницы в целом, эти свойства работают не так, как предполагается. В Chrome/Safari/Opera, если нет прокрутки, то documentElement.scrollHeight может быть даже меньше, чем documentElement.clientHeight ! С точки зрения элемента это невозможная ситуация.

Чтобы надёжно получить полную высоту документа, нам следует взять максимальное из этих свойств:

let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight ); alert('Полная высота документа с прокручиваемой частью: ' + scrollHeight);

Почему? Лучше не спрашивайте. Эти несоответствия идут с древних времён. Глубокой логики здесь нет.

Получение текущей прокрутки

Обычные элементы хранят текущее состояние прокрутки в elem.scrollLeft/scrollTop .

Что же со страницей? В большинстве браузеров мы можем обратиться к documentElement.scrollLeft/Top , за исключением основанных на старом WebKit (Safari), где есть ошибка (5991), и там нужно использовать document.body вместо document.documentElement .

К счастью, нам совсем не обязательно запоминать эти особенности, потому что текущую прокрутку можно прочитать из свойств window.pageXOffset/pageYOffset :

alert('Текущая прокрутка сверху: ' + window.pageYOffset); alert('Текущая прокрутка слева: ' + window.pageXOffset);

Эти свойства доступны только для чтения.

Прокрутка: scrollTo, scrollBy, scrollIntoView

Для прокрутки страницы из JavaScript её DOM должен быть полностью построен.

Например, если мы попытаемся прокрутить страницу из скрипта, подключенного в , это не сработает.

Обычные элементы можно прокручивать, изменяя 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 вниз. Кнопка ниже демонстрирует это: window.scrollBy(0,10)
• Метод scrollTo(pageX,pageY) прокручивает страницу на абсолютные координаты (pageX,pageY) . То есть, чтобы левый-верхний угол видимой части страницы имел данные координаты относительно левого верхнего угла документа. Это всё равно, что поставить scrollLeft/scrollTop . Для прокрутки в самое начало мы можем использовать scrollTo(0,0) . window.scrollTo(0,0)

Эти методы одинаково работают для всех браузеров.

scrollIntoView

Для полноты картины давайте рассмотрим ещё один метод: elem.scrollIntoView(top).

Вызов elem.scrollIntoView(top) прокручивает страницу, чтобы elem оказался вверху. У него есть один аргумент:

• если top=true (по умолчанию), то страница будет прокручена, чтобы elem появился в верхней части окна. Верхний край элемента совмещён с верхней частью окна.
• если top=false , то страница будет прокручена, чтобы elem появился внизу. Нижний край элемента будет совмещён с нижним краем окна.

Кнопка ниже прокрутит страницу так, что она сама окажется вверху:

А следующая кнопка прокрутит страницу так, что она сама окажется внизу

Запретить прокрутку

Иногда нам нужно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.

Чтобы запретить прокрутку страницы, достаточно установить document.body.style.overflow = «hidden» .

Первая кнопка останавливает прокрутку, вторая возобновляет её.

Аналогичным образом мы можем «заморозить» прокрутку для других элементов, а не только для document.body .

Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.

Это выглядит немного странно, но это можно обойти, если сравнить clientWidth до и после остановки, и если clientWidth увеличится (значит полоса прокрутки исчезла), то добавить padding в document.body вместо полосы прокрутки, чтобы оставить ширину содержимого прежней.

Итого

• Ширина/высота видимой части документа (ширина/высота области содержимого): document.documentElement.clientWidth/Height
• Ширина/высота всего документа со всей прокручиваемой областью страницы:

let scrollHeight = Math.max( document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight, document.body.clientHeight, document.documentElement.clientHeight );

• Прокрутку окна можно получить так: window.pageYOffset/pageXOffset .
• Изменить текущую прокрутку:
  • window.scrollTo(pageX,pageY) – абсолютные координаты,
  • window.scrollBy(x,y) – прокрутка относительно текущего места,
  • elem.scrollIntoView(top) – прокрутить страницу так, чтобы сделать elem видимым (выровнять относительно верхней/нижней части окна).

  Источник

  Как получить размеры экрана, окна и веб-страницы в JavaScript?

  

  Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.

  Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.

  Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.

  Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.

  1. Экран

  1.1. Размер экрана

  Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.

  

  Получить информацию о размере экрана можно с помощью свойства screen объекта window :

  const screenWidth = window.screen.width const screenHeight = window.screen.height 

  1.2. Доступный размер экрана

  Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.

  

  Для получения доступного размера экрана снова обращаемся к window.screen :

  const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 

  2. Окно

  2.1. Размер внешнего окна (или внешний размер окна)

  Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.

  Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :

  const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 

  2.2. Внутренний размер окна (или размер внутреннего окна)

  Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).

  

  Объект window предоставляет свойства innerWidth и innerHeight :

  const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight 

  Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:

  const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 

  3. Размер веб-страницы

  Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).

  

  Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):

  const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight 

  Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.

  4. Заключение

  Надеюсь, теперь Вы понимаете, как получать различные размеры.

  Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.

  Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.

  Наконец, размер веб-страницы — это размер контента.

  Благодарю за внимание, друзья!

  Источник

  Window screen.width

  The width property returns the total width of the user’s screen.

  The width property returns width in pixels.

  The width property is read-only.

  Note

  Use the height property to get the total height of the user’s screen.

  Syntax

  Return Value

  More Examples

  let text = «Total width/height: » + screen.width + «*» + screen.height + «
  » +
  «Available width/height: » + screen.availWidth + «*» + screen.availHeight + «
  » +
  «Color depth: » + screen.colorDepth + «
  » +
  «Color resolution: » + screen.pixelDepth;

  Browser Support

  screen.width is supported in all browsers:

  Chrome	Edge	Firefox	Safari	Opera	IE
  Yes	Yes	Yes	Yes	Yes	Yes

  Related Pages

  

  COLOR PICKER

  

  

  Report Error

  If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

  Thank You For Helping Us!

  Your message has been sent to W3Schools.

  Top Tutorials

  Top References

  Top Examples

  Get Certified

  W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

  Источник

  How to get the Width and Height of the screen in JavaScript?

  In this article, we are going to discuss how to get the width and height of the screen in JavaScript.

  Javascript provides an window.screen object that contains information regarding the user’s screen. The information includes height and width, and also many other features.

  To find the height and width of the screen you need to use the following read-only properties

  • Screen.height − This property is used to get the height of the screen in pixels.
  • Screen.width − This property is used to get the width of the screen in pixels.

  Syntax

  Following is the syntax of the height to get the height and with of a screen respectively −

  Example 1

  In the following example, the width of the screen is displayed using the screen.width method.

  Example 2

  In the following example, the height of the screen is displayed using the screen.height method.

  Example 3

  In the following example we are trying to get the width and height of the screen using the screen.width and screen.height properties −

  Example 4

  Following is another example of this −

  Источник

  Читайте также:  Html font face generator