как узнать высоту окна браузера js

Определяем размер окна браузера (JavaScript, jQuery)

Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:

но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "

На JavaScript код, определения разрешения экрана

scr_w=screen.width;
scr_h=screen.height;

На JavaScript определяем размер клиентской части окна браузера

client_w=document.body.clientWidth;
client_h=document.body.clientHeight;

Кроссбраузерное получение размеров окна на JS

function getPageSize() <
var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) <
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
> else if (document.body.scrollHeight > document.body.offsetHeight) < // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
> else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight) < // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
> else < // Explorer Mac. would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
>

var windowWidth, windowHeight;
if (self.innerHeight) < // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
> else if (document.documentElement && document.documentElement.clientHeight) < // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
> else if (document.body) < // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
>

// for small pages with total height less then height of the viewport
if(yScroll

Поделись с друзьями:

комментария 4 для записи Определяем размер окна браузера (JavaScript, jQuery)

Источник

Плагин для отображения размеров окна браузера

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

Подключил плагин к этой статье, справа внизу отображается результат работы плагина

Опубликовал репозиторий на GitHub

Зачем писать этот плагин?

Зачем писать данный плагин, если существуют расширения для браузеров с аналогичным функционалом и для чего он вообще нужен?

Во-вторых, в некоторых браузерах, особенно в мобильных, нет возможности устанавливать расширения

В-третьих, мы напишем плагин, который можем настроить под свои требования как функционально, так и визуально

Этот плагин будет помогать при разработке и тестировании адаптивной верстки

При адаптивной верстке необходимо постоянно следить за размерами окна браузера в зависимости от контрольных точек @media запросов

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

@media запросы основаны на полной ширине окна браузера, включая полосы прокрутки.

@media запрос срабатывает на полную ширину окна, и пока нет полос прокрутки ширина окна и ширина контента совпадают

Теперь появилась полоса прокрутки. @media запрос сработает как и раньше при полной ширине окна браузера, включая ширину полосы прокрутки, но теперь полоса прокрутки отнимает место у контентной части. При полной ширине окна 1200px, контенту остается около 1183px.

Плагин, который мы напишем, будет отображать полные размеры окна браузера включая размеры полос прокрутки, а также размеры контентной части, без учета размеров полос прокрутки

Подробнее про адаптивную верстку будет отдельная статья

Источник

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

Материал на этой странице устарел, поэтому скрыт из оглавления сайта.

Более новая информация по этой теме находится на странице https://learn.javascript.ru/size-and-scroll.

Для того, чтобы показывать элементы на произвольных местах страницы, необходимо во-первых, знать CSS-позиционирование, а во-вторых – уметь работать с «геометрией элементов» из JavaScript.

В этой главе мы поговорим о размерах элементов DOM, способах их вычисления и метриках – различных свойствах, которые содержат эту информацию.

Образец документа

Мы будем использовать для примера вот такой элемент, у которого есть рамка (border), поля (padding), и прокрутка:

Результат выглядит так:

В иллюстрации выше намеренно продемонстрирован самый сложный и полный случай, когда у элемента есть ещё и полоса прокрутки.

В этом случае полоса прокрутки «отодвигает» содержимое вместе с padding влево, отбирая у него место.

Мы должны в точности понимать, что происходит с размерами элемента при наличии полосы прокрутки, поэтому на картинке выше это отражено.

На рисунке выше поля padding изображены пустыми, но текст там вполне может быть, к примеру, при наличии вертикальной прокрутки.

Метрики

У элементов существует ряд свойств, содержащих их внешние и внутренние размеры. Мы будем называть их «метриками».

Метрики, в отличие от свойств CSS, содержат числа, всегда в пикселях и без единиц измерения на конце.

На картинке все они с трудом помещаются, но, как мы увидим далее, их значения просты и понятны.

Будем исследовать их снаружи элемента и вовнутрь.

offsetParent, offsetLeft/Top

Ситуации, когда эти свойства нужны, можно перечислить по пальцам. Они возникают действительно редко. Как правило, эти свойства используют, потому что не знают средств правильной работы с координатами, о которых мы поговорим позже.

Несмотря на то, что эти свойства нужны реже всего, они – самые «внешние», поэтому начнём с них.

В offsetParent находится ссылка на родительский элемент в смысле отображения на странице.

Уточним, что имеется в виду.

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

В примере ниже внутренний

offsetWidth/Height

Теперь переходим к самому элементу.

Для нашего элемента:

Координаты и размеры в JavaScript устанавливаются только для видимых элементов.

Это даёт нам замечательный способ для проверки, виден ли элемент:

clientTop/Left

…Но на самом деле они – вовсе не рамки, а отступ внутренней части элемента от внешней.

Она возникает тогда, когда документ располагается справа налево (операционная система на арабском языке или иврите). Полоса прокрутки в этом случае находится слева, и тогда свойство clientLeft включает в себя ещё и ширину полосы прокрутки.

clientWidth/Height

Если padding нет, то clientWidth/Height в точности равны размеру области содержимого, внутри рамок и полосы прокрутки.

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

scrollWidth/Height

Свойства clientWidth/clientHeight относятся только к видимой области элемента, а scrollWidth/scrollHeight добавляют к ней прокрученную (которую не видно) по горизонтали/вертикали.

Эти свойства можно использовать, чтобы «распахнуть» элемент на всю ширину/высоту, таким кодом:

Нажмите на кнопку, чтобы распахнуть элемент:

element.style.height = element.scrollHeight + „px“

scrollLeft/scrollTop

Свойства scrollLeft/scrollTop – ширина/высота невидимой, прокрученной в данный момент, части элемента слева и сверху.

Следующая иллюстрация показывает значения scrollHeight и scrollTop для блока с вертикальной прокруткой.

В отличие от большинства свойств, которые доступны только для чтения, значения scrollLeft/scrollTop можно изменить, и браузер выполнит прокрутку элемента.

Не стоит брать width/height из CSS

Мы рассмотрели метрики – свойства, которые есть у DOM-элементов. Их обычно используют для получения их различных высот, ширин и прочих расстояний.

Теперь несколько слов о том, как не надо делать.

Получение ширины элемента может быть таким:

Не лучше ли получать ширину так, вместо метрик? Вовсе нет!

Конечно, с точки зрения CSS размер auto – совершенно нормально, но нам-то в JavaScript нужен конкретный размер в пикселях, который мы могли бы использовать для вычислений. Получается, что в данном случае ширина width из CSS вообще бесполезна.

Есть и ещё одна причина.

Полоса прокрутки – причина многих проблем и недопониманий. Как говорится, «дьявол кроется в деталях». Недопустимо, чтобы наш код работал на элементах без прокрутки и начинал «глючить» с ней.

Как мы говорили ранее, при наличии вертикальной полосы прокрутки, в зависимости от браузера, устройства и операционной системы, она может сдвинуть содержимое.

Если ваш браузер показывает полосу прокрутки (например, под Windows почти все браузеры так делают), то вы можете протестировать это сами, нажав на кнопку в ифрейме ниже.

Описанные разночтения касаются только чтения свойства getComputedStyle(. ).width из JavaScript, визуальное отображение корректно в обоих случаях.

Итого

У элементов есть следующие метрики:

Источник

Получить размер экрана, текущей веб-страницы и окна браузера

17 ответов

Вы можете получить размер окна или документа с помощью jQuery:

Для размера экрана вы можете использовать screen объект:

Вот как мне удалось получить ширину экрана в React JS Project:

Если ширина равна 1680, вернуть 570, иначе вернуть 200

Для этого используйте: Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).

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

Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на рисунке), вы можете использовать мой плагин, jQuery.documentSize.

Обновление: теперь и для размеров окна

Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.

Это необходимо, потому что

С введением globalThis в ES2020 вы можете использовать такие свойства, как.

Для размера экрана:

Для размера окна

Для смещения:

Полное руководство по размерам экрана

JavaScript

Для высоты:

Примечание. Когда окно развернуто, оно будет равно screen.availHeight

Для ширины:

Для роста:

Но когда мы говорим об адаптивных экранах и если по какой-то причине мы хотим справиться с этим с помощью jQuery,

Дает правильное измерение. Даже это убирает лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства 🙂

Это представляет фактический размер обертки.

Вот кросс-браузерное решение с чистым JavaScript (Source) :

Вот мое решение!

Не-jQuery способ получить доступное измерение экрана. window.screen.width/height уже выставлен, но для отзывчивости веб-дизайна и полноты я думаю стоит упомянуть следующие атрибуты:

Я разработал библиотеку для знания реального размера окна просмотра для настольных компьютеров и мобильных браузеров, потому что размеры области просмотра несовместимы между устройствами и не могут полагаться на все ответы этого поста (согласно всем исследованиям, которые я сделал по этому поводу): https://github.com/pyrsmk/W

Вы можете использовать объект Screen, чтобы получить это.

Ниже приведен пример того, что он будет возвращать:

Чтобы получить ширину и высоту окна, оно должно быть screen.availWidth или screen.availHeight соответственно.

Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.

Здесь вы найдете информацию, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet

Bookmarklet

Исходный код

Оригинальный код в кофе:

В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.

Источник

Размеры элементов и прокрутка веб-страницы

Размеры элементов и прокрутка веб-страницы

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

Свойства clientWidth/Height для элемента – это как раз и есть ширина/высота видимой области окна.

Не window.innerWidth/Height

Надо отметить, что все браузеры, кроме IE8-, могут также поддерживать свойства window.innerWidth/innerHeight. Они сохраняют текущий размер окна.

В чём же отличие? Спросите вы. Оно конечно небольшое, но черезвычайно важное.

Свойства clientWidth/Height, если есть полоса прокрутки, возвратят именно ширину/высоту внутри неё, доступную для всего документа, а window.innerWidth/Height – будут игнорировать её наличие.

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

Обычно нас интересует только доступная ширина окна, для примера, чтобы нарисовать что-то, то есть за вычетом полосы прокрутки. Поэтому зачастую используется documentElement.clientWidth.

Ширина/высота веб-страницы с учётом прокрутки

Да теоретически, видимая часть страницы – это documentElement.clientWidth/Height, а вот полный размер с учётом полосы прокрутки – по аналогии, documentElement.scrollWidth/scrollHeight.

Это верно для всех обычных элементов.

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

Эта проблема может возникать именно для documentElement.

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

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

Если у обычного элемента текущую прокрутку можно получить в scrollLeft/scrollTop.

Дело в том, что большинство браузеров корректно обработает запрос к documentElement.scrollLeft/Top, однако Safari/Chrome/Opera есть ошибки, из-за которых вам следует использовать document.body.

Ну а, чтобы вообще обойти эту проблему, вы можете использовать свойства window.pageXOffset/pageYOffset:

Если IE8- не волнует, то просто используем эти свойства.

Кросс-браузерный вариант с учётом IE8 предусматривает вариант на documentElement:

Изменение прокрутки страницы: scrollTo, scrollBy, scrollIntoView

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

На обычных элементах scrollTop/scrollLeft в принципе можно изменять, и при этом элемент будет прокручиваться.

Никто вам не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку простой установкой document.documentElement.scrollTop, а в указанных – следует использовать для этого document.body.scrollTop. И все будет отлично работать.

Но есть и другое, универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).

scrollIntoView

Метод elem.scrollIntoView(top) должен вызываться на элементе и прокручивает страницу таким образом, чтобы элемент оказался вверху, если же параметр top равен true, и внизу, если top соответственно равен false. Причем, если данный параметр top не указан, то он будет равным true.

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

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

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

Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.

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

Итоги

Задачи

Прокрутка страницы

Реализуйте прокрутку страницы вниз, если пользователь нажал на определенный элемент.

Запрет прокрутки страницы

При клике на большое диалоговое окно запретите прокручивать остальную часть страницы.
Урок по прокрутке страницы на JavaScript

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Источник