Перейти к содержимому

Как узнать ширину окна браузера

  • автор:

Как узнать ширину экрана js

Чтобы узнать ширину экрана, можно воспользоваться встроенным свойством window.innerWidth — оно возвращает ширину окна в пикселях включая ширину вертикальной полосы прокрутки.

console.log(window.innerWidth); // => 1920

Разрешение экрана

Добро пожаловать на сайт, который поможет вам определить разрешение экрана онлайн. Данный сайт определяет разрешение монитора компьютера, разрешение Android смартфона или планшета Также вы можете узнать разрешение экранов планшетов и смартфонов , можно получить информацию о разрешении экранов популярных планшетовили смартфона и других мобильных устройств, разрешение экрана iPad, iPhone.
Кроме того, вы сможете определить онлайн текущие размеры окна браузера.
Разрешение экрана — количество пикселей на единицу площади. Если ваше разрешение экрана 1024 * 768 — это значит, что ширина вашего экрана 1024 пикселя, а высота — 768 пикселей.
Так же вы сможете воспользоваться нашим онлайн калькулятором PPI — рассчитать количество пикселей на дюйм.
Примечание: Указанное разрешение экрана, считываемое с Вашего устройства может отличаться от заявленного производителем более чем на 50 пикселей. P.S. Работаем над увеличением точности.

Предложения или вопросы? Пишите: mail@myresolutionis.ru

Как узнать разрешение экрана? Этот вопрос интересует многих, и это связано с тем, что в настоящее время существах огромное количество производителей, которые выпускают абсолютно разные устройства: планшеты, смартфоны, ноутбуки, просто мониторы, которые обладают различным разрешением экрана. Так как же узнать разрешение экрана монитора ноутбука или станционарного компьютера? Для этого пройдите по этой ссылке. С этим не должно возникнуть проблем. Но как узнать разрешение экрана на планшете или смартфоне? Очень редко можно встретить устройство, производитель которого запросто откроет доступ к данной информации. Конечно, вы можете узнать разрешение экрана устройства просто посмотрев на описание на коробке. А можете узнать на нашем сайте. Вы моментально узнаете разрешение экрана устройства просто зайдя на наш сайт.

Как узнать ширину окна браузера?

Фотография

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

Ситуация: нужно посмотреть, как выглядит страница при ширине экрана 1024 px (вместе с прокруткой)

  1. Установила Window Resizer из магазина Хрома. Задаю значение 1024х768
  2. Но если зайти на http://myresolutionis.ru , где можно посмотреть онлайн текущее разрешение экрана браузера в пикселях, то там указываются значения 1007×768.
  3. На http://whatsmy.browsersize.com/ тоже можно посмотреть ширину онлайн, и там в большинстве случаев результаты совпадают с тем, что я выбираю в Window Resizer. Но в ряде случаев не совпадают. Так, заданное 1280 там показывается как 1270

Правильно я понимаю, что использование Window Resizer + контроль на whatsmy.browsersize.com позволит мне точно контролировать ширину браузера?

Или вообще есть какие-то более элементарные пути? Простите, туплю (

PS Да, я искала обсуждение аналогичного вопроса на форуме и не нашла

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

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

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

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

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

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

Не window.innerWidth/Height

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

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

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

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

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

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

DOCTYPE – это важно

Обратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в 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);

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

В качестве свойств объекта window также доступны scrollX и scrollY

По историческим причинам существует два аналога window.pageXOffset и window.pageYOffset :

  • window.pageXOffset – то же самое, что и window.scrollX .
  • window.pageYOffset – то же самое, что и window.scrollY .

Прокрутка: 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)

В обоих методах вместо координат также может использоваться объект options , как аргумент:

window.scrollTo(options); window.scrollBy(options);

options поддерживает три свойства:

window.scrollTo(< top: 100, left: 0, behavior: "smooth" >);
  • top – то же самое, что y / pageY
  • left – то же самое, что x / pageX
  • behavior – определяет, каким образом будет прокручиваться страница:
    • «smooth» – плавно (не поддерживается в IE и в старых версиях Safari)
    • «instant» – мгновенно
    • «auto» – определяется браузером (зависит от CSS-свойства scroll-behavior)

    Демонстрация плавной прокрутки страницы:

    scrollIntoView

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

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

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

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

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

    Как и scrollTo / scrollBy , scrollIntoView также принимает объект options как аргумент (он немного отличается):

    this.scrollIntoView(options).

    options поддерживает три свойства:

    this.scrollIntoView(< behavior: "smooth", block: "end", inline: "nearest" >);
    • behavior – анимация прокрутки ( smooth , instant , auto )
    • block – вертикальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: start
    • inline – горизонтальное выравнивание ( start , center , end , nearest ). Значение по умолчанию: nearest

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

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

    Чтобы запретить прокрутку страницы, достаточно установить 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 );

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *