Как измерить ширину окна браузера
Обновлено: 16.05.2024
Как сделать так, чтобы изображение автоматически изменялось по размеру окна браузера по высоте
Я пытаюсь сделать изображение подходящим для окна браузера по высоте и динамически реагировать на размер окна.
Мне нужно, чтобы соотношение сторон изображения оставалось прежним, но изображение может быть больше, чем его исходное разрешение при просмотре на больших экранах.
Я не хочу, чтобы изображение выходило за пределы экрана и создавало эффект прокрутки.
Изображение должно оставаться по центру внутри контейнера как по вертикали, так и по горизонтали.
Breageside 9 Авг 2016 в 11:023 ответа
Лучший ответНепонятно, что вы пробовали до сих пор, и мы не видим никакого кода. Я все равно постараюсь ответить и, возможно, это вам поможет.
Прежде всего, когда вы работаете с адаптивными макетами, всегда старайтесь изменять размер элементов с помощью >. Это поможет вам сохранить ваш контент относительно размера браузера - независимо от того, был ли изменен размер или насколько велик экран.
Этот код может помочь вам вставить адаптивное изображение на ваш сайт:
В этом примере размер div составляет 80% от высоты и ширины окна, поэтому он никогда не превышает область просмотра. Максимум. меры img составляют 100% от div , а height:auto; гарантирует, что он сохраняет свое соотношение сторон. Затем изображение помещается в div до максимально допустимого значения. Вы можете удобно центрировать изображение, установив display:table-cell; vertical-align:middle; text-align:center; на DIV.
Как получить размеры экрана, окна и веб-страницы в JavaScript?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Как отпредилить размер окна браузера на javascript?
Как с помощью javascript определить размер окна браузера и потом это значение записать как стиль высоты для блока в css.
Решения вопроса 0
Ответы на вопрос 2
размер клиентской части окна браузера:
это значение записать как стиль высоты для блока в css
Какая цель преследуется?
Ответ написан более трёх лет назад
lynnikvadim @lynnikvadim Автор вопроса
Вообще нужно чтобы широкоэкранный слайдер был по высоте окна браузера.
есть варианты сделать это на css не прибегая к такому костылю с JS.
lynnikvadim @lynnikvadim Автор вопроса
Сергей Озеранский: Каким образом ?
Сергей Озеранский: Когда столкнулся с модальными окнами на JS (ArcticModal), как раз и пришлось отойти от JS и делать на чистом CSS. К слову с FancyBox такого не наблюдалось. (Или я не сильно-таки изучил этот плагин от ArcticModal).
И всё-таки, лично для меня JS предпочтительнее. так как более гибок для конфигурирования.
Размеры и прокрутка страницы
Материал на этой странице устарел, поэтому скрыт из оглавления сайта.
Как найти ширину окна браузера? Как узнать всю высоту страницы, с учётом прокрутки? Как прокрутить её из JavaScript?
С точки зрения HTML, документ – это document.documentElement . У этого элемента, соответствующего тегу <html> , есть все стандартные свойства и метрики и, в теории, они и должны нам помочь. Однако, на практике есть ряд нюансов, именно их мы рассмотрим в этой главе.
Ширина/высота видимой части окна
Свойства clientWidth/Height для элемента document.documentElement – это как раз ширина/высота видимой области окна.
Например, кнопка ниже выведет размер такой области для этой страницы:
Не window.innerWidth/HeightВ чём отличие? Оно небольшое, но чрезвычайно важное.
Свойства 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 есть ошибки (к примеру 157855, 106133), из-за которых следует использовать document.body .
Чтобы вообще обойти проблему, можно использовать специальные свойства window.pageXOffset/pageYOffset :
Кросс-браузерный вариант с учётом IE8 предусматривает откат на documentElement :
Изменение прокрутки: scrollTo, scrollBy, scrollIntoView
Чтобы прокрутить страницу при помощи JavaScript, её DOM должен быть полностью загружен.
На обычных элементах свойства scrollTop/scrollLeft можно изменять, и при этом элемент будет прокручиваться.
Никто не мешает точно так же поступать и со страницей. Во всех браузерах, кроме Chrome/Safari/Opera можно осуществить прокрутку установкой document.documentElement.scrollTop , а в указанных – использовать для этого document.body.scrollTop . И будет работать. Можно попробовать прокручивать и так и эдак и проверять, подействовала ли прокрутка, будет кросс-браузерно.
Но есть и другое, простое и универсальное решение – специальные методы прокрутки страницы window.scrollBy(x,y) и window.scrollTo(pageX,pageY).
Метод scrollBy(x,y) прокручивает страницу относительно текущих координат.
Например, кнопка ниже прокрутит страницу на 10px вниз:
Метод scrollTo(pageX,pageY) прокручивает страницу к указанным координатам относительно документа.
Он эквивалентен установке свойств scrollLeft/scrollTop .
Чтобы прокрутить в начало документа, достаточно указать координаты (0,0) .
scrollIntoView
Для полноты картины рассмотрим также метод elem.scrollIntoView(top).
Метод elem.scrollIntoView(top) вызывается на элементе и прокручивает страницу так, чтобы элемент оказался вверху, если параметр top равен true , и внизу, если top равен false . Причём, если параметр top не указан, то он считается равным true .
Кнопка ниже прокрутит страницу так, чтобы кнопка оказалась вверху:
А следующая кнопка прокрутит страницу так, чтобы кнопка оказалась внизу:
Запрет прокрутки
Иногда бывает нужно временно сделать документ «непрокручиваемым». Например, при показе большого диалогового окна над документом – чтобы посетитель мог прокручивать это окно, но не документ.
Чтобы запретить прокрутку страницы, достаточно поставить document.body.style.overflow = "hidden" .
При этом страница замрёт в текущем положении.
При нажатии на верхнюю кнопку страница замрёт на текущем положении прокрутки. После нажатия на нижнюю – прокрутка возобновится.
Вместо document.body может быть любой элемент, прокрутку которого необходимо запретить.
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Это может быть не очень красиво, но легко обходится, если вычислить размер прокрутки и добавить такой же по размеру padding .
Итого
Для получения размеров видимой части окна: document.documentElement.clientWidth/Height
Для получения размеров страницы с учётом прокрутки:
Прокрутка окна:
На всякий случай – вот самый кросс-браузерный способ, учитывающий IE7- в том числе:
Установить прокрутку можно при помощи специальных методов:
- window.scrollTo(pageX,pageY) – абсолютные координаты,
- window.scrollBy(x,y) – прокрутить относительно текущего места.
- elem.scrollIntoView(top) – прокрутить, чтобы элемент elem стал виден.
Задачи
Полифилл для pageYOffset в IE8
важность: 3Обычно в IE8 не поддерживается свойство pageYOffset . Напишите полифилл для него.
Размеры и прокрутка окна
Как узнать ширину и высоту окна браузера? Как получить полную ширину и высоту документа, включая прокрученную часть? Как прокрутить страницу с помощью JavaScript?
Для большинства таких запросов мы можем использовать корневой элемент документа document.documentElement , который соответствует тегу <html> . Однако есть дополнительные методы и особенности, которые необходимо учитывать.
Ширина/высота окна
Чтобы получить ширину/высоту окна, можно взять свойства clientWidth/clientHeight из document.documentElement :
Например, эта кнопка показывает высоту вашего окна:
Не window.innerWidth/HeightБраузеры также поддерживают свойства window.innerWidth/innerHeight . Вроде бы, похоже на то, что нам нужно. Почему же не использовать их?
Если есть полоса прокрутки, и она занимает какое-то место, то свойства clientWidth/clientHeight указывают на ширину/высоту документа без неё (за её вычетом). Иными словами, они возвращают высоту/ширину видимой части документа, доступной для содержимого.
А window.innerWidth/innerHeight включают в себя полосу прокрутки.
Если полоса прокрутки занимает некоторое место, то эти две строки выведут разные значения:
В большинстве случаев нам нужна доступная ширина окна: для рисования или позиционирования. Полоса прокрутки «отъедает» её часть. Поэтому следует использовать documentElement.clientHeight/Width .
DOCTYPE – это важноОбратите внимание, что геометрические свойства верхнего уровня могут работать немного иначе, если в 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 .
Недостатком этого способа является то, что сама полоса прокрутки исчезает. Если она занимала некоторую ширину, то теперь эта ширина освободится, и содержимое страницы расширится, текст «прыгнет», заняв освободившееся место.
Измерения окна, документа и элементов
В решении многих задач может понадобиться определить положение, размер окна браузера, или каких-нибудь определенных элементов документа. В этой записи будут перечислены все способы определения этих значений.
Разрешение экрана
Для определения ширины и высоты экрана пользователя используются свойства width и height объекта window.screen . Эти свойства доступны во всех браузерах.
Положение окна браузера
Мнения разработчиков в вопросе какое же свойство должно хранить положение окна относительно верхней левой точки экрана, видимо, разошлись.
В итоге мы получили две пары свойств: window.screenY , window.screenX и window.screenTop , window.screenLeft .
Первые два работают в браузерах Mozilla (например Firefox), вторая пара работает в Internet Explorer и Opera. В браузерах, основанных на движке WebKit (например Safari, Chrome), обе пары работают и их значения равны друг другу соответственно.
Но невозможно абсолютно кросс-браузерно определить положение окна, поскольку в разных браузерах отсчет идет до разных точек. Дело в том, что браузеры Internet Explorer и Opera в значениях screenTop и screenLeft хранят координаты левого верхнего угла документа, а не всего окна, поэтому даже при развертывании на весь экран их значения будут не нулевые.
Напротив, остальные браузеры начинают отсчет от верхней левой точки самого окна, как и ожидается для этих свойств. Стоит отметить, что в Firefox, при развертывании окна на весь экран, значения screenY и screenX могут быть отрицательными.
Странно, но в Opera значения screenY и screenX не undefined , однако я не могу понять, что они значат. При любых перемещениях окна эти значения не меняются и все время отрицательны. Если это не очередной глюк Opera, и я что-то упустил, отпишите, пожалуйста, в комментариях.
Положение окна браузера можно изменить двумя методами:
Размеры окна браузера
Под размерами окна браузера подразумеваются как размер всего окна целиком (вместе с хромом и панелями), так и размер видимой части документа (вьюпорт), или другими словами, размер окна браузера без панелей и хрома.
К сожалению, с получением этих значений больше проблем, чем может показаться на первый взгляд.
Для получения размеров окна браузера целиком во всех браузерах, кроме Internet Explorer, вы можете использовать свойства window.outerWidth и window.outerHeight . И, насколько я понимаю, аналогов для Internet Explorer не существует.
С размерами вьюпорта тоже существуют проблемы. Дело в том, что в зависимости от браузера и типа документа значения будут разные, в частности - не всегда ясно, будет ли размер скроллбара учитываться, или нет.
Во всех браузерах, кроме Internet Explorer, вы можете получить размер вьюпорта с помощью свойств window.innerWidth и window.innerHeight . Эти свойства всегда будут включать ширину, или высоту скроллбара, что в некоторых задачах неуместно.
Другим способом определения размеров вьюпорта могут служить свойства clientWidth и clientHeight объекта document.documentElement , или, другими словами, элемента html текущего документа.
Но это справедливо только для режима следования стандартам (CSS1Compat mode), поэтому приведенный выше код работает верно в этом документе.
Но если у страницы не будет указан doctype, то в некоторых браузерах свойства clientWidth и clientHeight объекта document.documentElement будут иметь значения ширины и высоты всего документа целиком, а не только видимой его части, в то время как document.body.clientWidth и document.body.clientHeight наоборот будут иметь значения размеров вьюпорта.
И учитывая то, что нет возможности узнать, что является размерами вьюпорта - свойства document.documentElement или document.body (поскольку они оба существуют, но смысл значений может быть разный), то получается, что кросс-браузерное определение размеров вьюпорта этим способом - невозможно, если документ отображается не в режиме следования стандартам.
Размеры окна браузера можно изменить двумя методами:
Скролл окна браузера
Сколлбар имеет несколько параметров: ширина, высота, значение прокрутки сверху, значение прокрутки слева.
Первые два параметра определяются свойствами scrollWidth и scrollHeight объекта document.documentElement . Это, опять же, справедливо только для режима следования стандартам.
Значения ширины и высоты прокрутки окна - количество пикселей, которые могут быть прокручены скроллом. Другими словами - прямоугольник, образованный всеми видимыми элементами документа.
Примечание на счет элементов я сделал не просто так: если какой-нибудь абсолютно позиционированный элемент будет "вылезать" за пределы body , то он "растянет" ширину/высоту скролла, но размеры document.body останутся прежними. Напротив, если размеры документа меньше, чем размеры вьюпорта - то значения scrollWidth и scrollHeight будут равны размерам документа, а не всего окна.
Стоит отметить, что как и в случае с размерами вьюпорта, в режиме "quirks mode" не всегда понятно, свойства какого элемента ( documentElement или body ) будут иметь нужные нам значения скролла.
Для того, чтобы определить на сколько пикселей прокручен документ, нужно обратиться к свойствам scrollTop и scrollLeft объекта document.documentElement , если браузер в режиме следования стандартам, или document.body , если браузер в режиме "quirks mode".
В браузерах на движке Mozilla (Firefox) или WebKit (chrome, safari) вы можете воспользоваться свойствами window.scrollY и window.scrollX для определения этих значений. Они будут равны scrollTop и scrollLeft соответственно.
Из скрипта вы можете управлять прокруткой страницы, пользуясь следующими методами (обратите внимание на очередность параметров):
Размеры документа и элементов
Одна из самых часто встречаемых задач - определение размера элемента.
Дело в том, что не всегда достаточно узнать какие значения размеров были установлены через стили элемента и особенно это касается "резиновых" элементов (которые растягиваются в зависимости от размеров их содержания), или элементов с фиксированными размерами, но имеющих внутренние отступы.
Во всех браузерах, независимо от режима, вы можете получить размер элемента с помощью свойств offsetWidth и offsetHeight .
Для демонстрации, небольшой пример:
Точно так же можно определить размер всего документа, точнее размеры элемента body :
Положение элемента на странице
Одна из самых распространенных задач - определение абсолютной позиции элемента относительно левого верхнего угла документа.
Для определения позиции используются следующие свойства элемента:
offsetTop - отступ сверху, измеряется в пикселах относительно родительского элемента.
offsetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.
offsetParent - ближайший родитель, относительно которого делается отсчет. Его значение будет null если текущий элемент невидим ( display: none ) или это корневой элемент документа.
Поскольку значение считается от ближайшего родителя, то абсолютная позиция относительно верхнего левого угла документа обычно считается в цикле, который завершается тогда, когда значение offsetParent будет равно null .
Обычно, функция по определению абсолютной позиции выглядит следующим образом:
Таким способом можно считать позицию как статичных элементов ( position: static ), так и элементов с абсолютной позицией ( position: absolute ).
Заключение
Надеюсь, что данная запись поможет вам лучше разобраться в измерениях документа и его элементов. Буду рад услышать замечания или вопросы в комментариях.
Автор: Octane, дата: 26 декабря, 2008 - 23:23Ожидал увидеть еще способ кросс-браузерного получения координат мыши
Взяв реализацию из jQuery и немного переделав её, получил:
Сам не разбирался еще, что происходит в этом большом выражении, возможно получится упростить
Много полезного, как раз то, что искал. Совсем не то, что ковыряться в Prototype, jQuery или Dojo. Спасибо!
Автор: hogart, дата: 31 марта, 2009 - 14:33Должен отметить, что функция получения координат элемента относительно верхнего левого угла документа даст неверный результат в IE6, если в цепочке offsetParent попадется элемент с position: relative.
Афтор зачод! Наитолковые статьи в рунете по ЯС! Сразу видно берется за дело с головой. Пишы исчо! Где я только не рылся за этим материалом а оно вот он чо! всё тут и на блюдечге!!
// З.Ы. Илья - ф основную книгу эту статью ИМХО этот каждому пригодится, а в этих блогах фиг нашол, ещё повезло что наткнулся =)
автор пишы исчо это точно:) спс за размеры окна браузера
Автор: Илья Кантор, дата: 2 мая, 2009 - 22:23На основе некоторых идей этой статьи создан основной материал сайта.
Спасибо за статью, Андрей!
Автор: x-yuri, дата: 11 мая, 2009 - 00:49 Автор: Андрей Параничев, дата: 16 августа, 2009 - 00:25Спасибо, всегда путаю, что x (икс) это "left" в переносе на слова.
Автор: JSTalker, дата: 11 августа, 2009 - 08:59Классная статья, спасибо!
Но подскажите, как эти полезные свойства применить собственно к элементам страницы: к примеру чтоб таблица, структурирующая GUI, масштабировалась относительно размеров видимой обл-ти? К ее атрибутам не применимы свойства :
Как узнать ширину и высоту элемента div до его отображения, это реально? Заранее спасибо
Автор: EugenyK, дата: 30 октября, 2009 - 15:26Для body везде получились различные значения высоты.
Автор: Ntropy, дата: 5 ноября, 2009 - 23:09В качестве попытки кроссброузерного определения положения и размеры окна, можно попробовать его пробно подвигать и поизменять размеры. В этом случае сразу выяснится что учитывается для возвращаемых значений.
Автор: Vladimir_O, дата: 9 ноября, 2009 - 15:43А что вы думаете по поводу такого кроссбраузерного определения размера вьюпорта:
в IE7 не сработал, выдал 0
Я понял. Для IE надо math.max получать. Спасибо
Работает корректно во всех браузерах!
Определяет размер рабочей области окна!
+ размер области документа (с учетом дивов с абсолютным позициониррованием)
+ работает и в ИЕ6 и в Сафари
Ой, чуть не забыл пояснить.
функция возвращает:
ww - window width
wh - window height
dw - document width
dh - document height
wsl - window scroll left
wst - window scroll top
Снова я, уж простите, доработанная функция:
Автор: lancer, дата: 28 февраля, 2012 - 01:19Норм, хотя когда футер прижат надо под ie8 как минимум перерасчитывать все.
Надеюсь кому то помог! Потому как сам перерыл огромную кучу информации пока соорудил это.
Спасибо, но для тех, кто не подключал jQuery эту часть кода
надо заменить на
Спасибо. Долго искал эту информацию и нашел.
Автор: edd_k, дата: 29 июля, 2010 - 23:49А я уже давно забил на попытки сооружать мегауниверсальные функции. Я следую таким правилам:
- верстаю в xhtml со следующим шаблоном пустого дока:
- если страница верстается php, то конечно же в нем шлется заголовок
- если что-то пошло не так, значит накосячил в html-коде и он уже в квирк-моде, открываю в Опере, жму "Соблюдены ли web-стандарты" и добиваюсь успешной проверки на W3C-валидаторе. По-ходу, практически не встречаю в инете страниц, проходящих валидацию. Эта страничка например тоже не проходит - куча досадных ошибок типа не указан тип скрипта, блок стилей вставлен там где нельзя, спаны закрываются, но не открывались перед этим, id дублирующиеся и т.д. Очень распространен подход, когда в js пишут что-то типа
(На этой странице такое есть) Ну а слеш в закрывающем теге кто экранировать будет!? Зачем делить слово SCRIPT на две части, если тут же ошибка потяжелее?
проходит валидацию, ессесно работает и ничего не нужно делить. Нужно просто не забыть указать тип скрипта, вставить в нем коменты-ограничители для XML-парсера и экранировать символы / и ' в строках.
А когда половина страниц валидируются, другие в квирке рисуются, то конечно начинается каша, геморой, бессонные ночи и т.д.
Итак, начинать следует со стандартизации своих проектов и исправления в них ошибок перед каждым релизом (мы ж не роботы, конечно забываем временами и коменты вставлять и < br > вместо < br /> на скорую руку пишем) - отправка страницы прямо из браузера на W3C всегда под рукой.
Ну а когда валидация пройдена, то и гемороя меньше. Конечно если речь не идет о совсем старых браузерах, на которые я могу забить. Кто не может, тому мои искренние сожаления и моральная поддержка в тяжбах.
А так, провел небольшой тест на Опера 10.60 (пачка пердыдущих версий скорей всего то же выдаст), IE8 и FF 3.6.6. Создал корректную страницу с длинной таблицей на 100 строк, каждая строка имеет паддинг, прописанный в CSS, что в IE и в Фоксе приводит к увеличению высоты html (т.е. html становится длиннее body), аналогично и при div-верстке, т.е. лично таблицы тут ни при чем. Такая же фича наблюдается и в Опере ИНОГДА. Возможно в квирке - не проследил. В тестовом примере в Опере html не удлинился и не испортил страницу лишним белым куском на 700+ точек.
Результаты таковы (html - это document.documentElement):
1. Виевпорт во всех трех записан и в body, и в html корректно и с вычетом скролбара.
2. Во всех браузерах body.scrollTop равен 0 не зависимо от того, где мы находимся - вверху или внизу. В принципе, логично, у нас же html скролится, а не body.
2. Во всех браузерах offsetWidth и offsetHeight что у body, что у html равны размеру виевпорта.
3. Исходя из вышесказанного и увиденного полная высота именно body записана только в IE, в котором мы можем видеть, что body - 2471 px, а html - 3178 px; в Опере мы можем понадеяться, что лишней простыни после body не добавлено и следовательно его высота равна высоте html, а вот в Фоксе мы понятия не имеем, что body короче html и вообще короче ли или одинаковы.
Если нужно знать высоту именно body, то в ряде случаев можно попробовать запретить скрол html-у и выдать скролл body. Но в ряде случаев такой финт ушами не получится (если получится вообще, т.к. не пробовал еще). Например если у нас дизайн на 100% высоты видимого окна, тогда чтобы размер документа был на всю видимую высоту даже если контент коротковат для этого, нам придется в css выставить высоту 100% для html, body и контейнера, который содержит контент и например футер или бекграунд внизу. А в таком случае когда контента будет больше чем на высоту виевпорта указанные нами 100% для html будут делать его всегда не меньше чем body в нем,который тоже не меньше чем контент в нем. Т.е. фишка с коротким html и скролящимся в нем body - не возможна.
Вот так. Придется обходится высотой html или решать, как обойти проблему его удлинения.
Автор: Delis, дата: 2 сентября, 2010 - 22:01Стоит отметить, что в IE8 (может и других версий) screen.width и window.screen.width возвращают не реальное разрешение экрана, а виртуальное (т.е. при изменении масштаба отображения меняется и разрешение, возвращаемое функциями, например, при помощи Ctrl+колесо мыши).
Автор: RE_, дата: 20 сентября, 2010 - 10:19Доходчиво про ClientX/Y и почему Опера их нормально обрабатывает.
Говорю Спасибо за сайт.
Мне очень помог.
Спасибо за статью! Но нигде не могу найти, как можно (и можно ли вообще) определить расстояние нижней границы элемента до нижней границы окна браузера. Может, кто-нибудь подскажет. Заранее спасибо!
Всем привет, Великолепная фраза
Интересно конечно, но есть много вопросов по теме ИМХО. Давайте обсудим (мыло в подписи) или тут, если не затруднит
Автор: negr78, дата: 14 июня, 2011 - 15:30"Буду раЗ услышать замечания . "
помог scrollHeight снять с дива высоту динамически
var nextdata = 10; var controlXP = null;
Modalheightobj = (Winmedia.WindowData.scrollHeight - 450);
if ((EvenTop >= Modalheightobj) && (EvenTop > controlXP) && (controlXP < Modalheightobj))
case '415' : case '425' :
Интерестная статья..
подскажите как сделать:
при scrollTop(300) , например, чтоб цвет блока менялся, нужно производить изменения по достижению этой высоты, без кликов и перезагрузок страницы
вот такой вариант покачто получился, но приходится обновлять страницу =( что не есть хорошо.
Автор: Stimulus, дата: 8 сентября, 2011 - 01:35offetLeft - отступ слева, измеряется в пикселах относительно родительского элемента.
подскажите как можно проверить, до конца ли прокручена страница скроллом?
есть вопрос к хорошей статье, у меня не работает функция offsetHeight в chrome, показывает 0, если принудительно не определен размер diva, что делать? заранее благодарен
пс: хром с 15ой версии, привиос версии не проверял
я конечно догадывался, что проще пролезть в форточку, чем пройти через дверь, но все же вот самый простой способ узнать высоту вьюпорта в любом браузере!=)
абсолютно аналогично для ширины. что проще чем убрать скролы, обрубив все лишнее, что вылезает за окно браузера; измерить высоту и вернуть обратно?=)
коечто подправил. для динамической работы)
Автор: hard-t, дата: 10 июля, 2012 - 16:05Вопрос исключительно для профессионалов. Я хочу узнать реальную ширину текста. Есть стиль для некоего div'а:
Соответственно забиваю текст в нужный div и использую свойство scrollWidth. Получаю реальную ширину, однако это свойство не дает дробной части, которая есть в firefox. отсюда вопрос, как найти эту потерянную дробную часть.
Подскажите, интересует вывод всплывающего окна по средине браузера. Сейчас сделана привязка к координатам родительской ссылки.
Не паримся, определяем размер страницы так используя jquery - $(document).height() - коротко, правильно, кросбраузерно.
Автор: zhurchik, дата: 5 апреля, 2013 - 18:36Огромное спасибо!
Отличная и полезная статья.
Также - спасибо комментаторам, многие дельные.
не лучше ли сейчас вместо offsetWidth и offsetHeight. всегда использовать getBoundingClientRect?
Определяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery
Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS.
Где может пригодиться?
За всех не скажу, но определение размеров экрана или окна браузера, лично для меня, пригождается при внедрении в CMS всевозможных галерей, слайдеров и т.д.
На JS
Определение ширины или высоты монитора
Это самый простой способ, которые работает во всех браузерах и на всех устройствах. Если у Вас не подключено никаких сторонних библиотек, которые помогли бы сделать тоже самое, то этот вариант единственный.
Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.
В JS, чтобы определить размеры экрана, нужно использовать:
Ниже я привел работающий пример как можно узнать размеры экрана на JS:
Определение ширины и высоты окна браузера
Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:
Соответственно вот пример использования:
На jQuery
Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.
Определение размеров монитора на jQuery
Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.
Для определения ширины или высоты окна браузера
Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:
Комментарии
Я вроде и написал, что пример бессмысленный. Главное же возможность
Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.
Я обновил статью и сейчас должно все работать как часы.
А не проще нативно получить через Javascript все эти данные без JQuery. Что за маразм?
Вы невнимательно читаете статью. Есть же и на JS. jQuery приведен для тех проектов, где он используется.
Важное событие
- Павел Urman прокомментировал Как закрыть крышку часов Tissot?
- AdminWay прокомментировал kernel_task грузит проц на 100% на MacOS BigSur
- Лев прокомментировал kernel_task грузит проц на 100% на MacOS BigSur
- AdminWay прокомментировал kernel_task грузит проц на 100% на MacOS BigSur
- Лев прокомментировал kernel_task грузит проц на 100% на MacOS BigSur
Защита со стороны DNS: реально или нет? Или сервис SkyDNS!
Создаем шаблоны писем в Thunderbird или делаем нашу жизнь проще
Как импортировать большую базу в MySQL
Почему FTP может портить файлы?
Ошибка при загрузке компьютера или о чем пищит BIOS?
Поднимаем сервер DHCP на Cisco 3750
Калибровка сенсорного экрана в Kyocera KM-3050
Зарядка для айтишника или профилактика шейного остеохондроза
This table does not contain a unique column. Grid edit, checkbox, Edit, Copy and Delete features are not available.
Как я русифицировал Kindle 4?
Как в Sublime Text закрыть все вкладки без сохранения?
Горячие клавиши Sublime Text 2
ОглавлениеЕсли Вы используете материал моего блога, то будьте добры поставьте ссылку.
Определить размер окна браузера
Разрешение экрана — это количество пикселей, приходящихся на единицу площади. Например, разрешение экрана составляет 1024Х768. В данном случае ширина экрана будет равна 1024 пикселей, высота 768 пикселей. Заметим, что определение «разрешения экрана» следует отличать от определения «размер окна браузера». Так,если размер окна браузера уменьшен вручную, то при просмотре какого-то сайта можно развернуть браузер на весь экран. Зачем нужно знать размер окна браузера. Например, нам нужно, чтобы блок полностью закрывал все окно браузера, либо создать резиновый дизайн.
Получить размер экрана, текущей веб-страницы и окна браузера
Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , >, screenX , screenY , которые будут работать во всех основных браузерах?
Вы можете получить размер окна или документа с помощью jQuery:
Для размера экрана вы можете использовать screen объект:
Ankit Jaiswal 16 Сен 2019 в 04:18Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570, иначе вернуть 200
PowerStat 26 Июн 2019 в 07:19Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта, используйте «console» или после нажатия «Inspect» .
Шаг 1 . Нажмите правую кнопку мыши, выберите «Проверить», а затем нажмите «Консоль».
Шаг 2 . Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме «Развернуть», необходимо сначала нажать кнопку «Развернуть» (присутствует в правом или левом верхнем углу) и отменить ее.
шаг 3 . Теперь напишите следующее после знака "больше" ('>'), т.е.
solanki. 9 Июл 2016 в 04:22Вы также можете получить ширину и высоту окна, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера .
Для этого используйте: Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).
В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции на окне, независимо от того, какое разрешение ориентации или размера окна использует браузер.
serfer2 21 Авг 2014 в 10:44Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа ( pageWidth и pageHeight на рисунке), вы можете использовать мой плагин, jQuery.documentSize.
У него только одна цель: всегда возвращать правильный размер документа, даже в тех случаях, когда jQuery и другие методы fail. Несмотря на его название, вам не обязательно использовать jQuery - он написан на ванильном Javascript и тоже работает без jQuery.
Для глобального document . Для других документов, например во встроенном фрейме, к которому у вас есть доступ, передайте документ в качестве параметра:
Обновление: теперь и для размеров окна
Начиная с версии 1.1.0, jQuery.documentSize также обрабатывает размеры окна.
Это необходимо, потому что
- $( window ).height() является глючит в iOS, до такой степени, что он бесполезен
- $( window ).width() и $( window ).height() являются ненадежно для мобильных устройств, поскольку они не справляются с эффектами мобильного масштабирования.
JQuery.documentSize предоставляет $.windowWidth() и $.windowHeight() , которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.
Community 23 Май 2017 в 12:26С введением globalThis в ES2020 вы можете использовать такие свойства, как.
Для размера экрана:
Для размера окна
Для смещения:
Prashant Gupta 11 Янв 2020 в 14:35Полное руководство по размерам экрана
JavaScript
Для высоты:
Примечание. Когда окно развернуто, оно будет равно screen.availHeight
Для ширины:
Для роста:
Для ширины .
Hamza Abbasi 3 Дек 2019 в 09:26Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 21 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры - если это так, вам нужно только следующее:
ashleedawg 2 Янв 2020 в 09:04Дает правильное измерение. Даже это убирает лишнее пространство полосы прокрутки, и нам не нужно беспокоиться о корректировке этого пространства :)
Aabha Pandey 22 Апр 2015 в 07:29Это представляет фактический размер обертки.
Akim Kelar 15 Окт 2015 в 08:30Вот кросс-браузерное решение с чистым JavaScript (Source) :
confile 29 Мар 2015 в 13:46Вот мое решение!
13 Сен 2017 в 04:41Не-jQuery способ получить доступное измерение экрана. window.screen.width/height уже выставлен, но для отзывчивости веб-дизайна и полноты я думаю стоит упомянуть следующие атрибуты:
Daniel W. 27 Фев 2014 в 22:29 Jonatas Walker 24 Ноя 2015 в 19:31 pyrsmk 13 Апр 2016 в 08:16utilWidth и vendHeight - доступная ширина и высота экран (исключая панели задач ОС и тому подобное).
Вы можете использовать объект Screen, чтобы получить это.
Ниже приведен пример того, что он будет возвращать:
Чтобы получить переменную screenWidth , просто используйте screen.width , то же самое с screenHeight , просто используйте screen.height .
Чтобы получить ширину и высоту окна, оно должно быть screen.availWidth или screen.availHeight соответственно.
Для переменных pageX и pageY используйте window.screenX or Y . Обратите внимание, что это из ОЧЕНЬ ЛЕВОГО / ТОП ВАШЕГО ВЛЕВО / ТОП-ЭСТ ЭКРАНА . Таким образом, если у вас есть два экрана шириной 1920 , то окно 500px слева от правого экрана будет иметь значение X 2420 (1920 + 500). screen.width/height , однако, отображает текущую ширину или высоту экрана.
Чтобы получить ширину и высоту вашей страницы, используйте jQuery $(window).height() или $(window).width() .
Снова используя jQuery, используйте $("html").offset().top и $("html").offset().left для значений pageX и pageY .
Endless 11 Мар 2016 в 15:52Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.
Bookmarklet
Исходный код
Оригинальный код в кофе:
В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.
Читайте также: