Как посмотреть ширину окна браузера Яндекс

Определяем ширину/высоту экрана или окна браузера с помощью JS и на jQuery

При разработке интерфейсов частенько приходиться пользоваться JavaScript`ом. Раньше считалось, что использовть любые скрипты, которые исполняются на стороне пользователя – плохо и использование JS считалось «дурным тоном».

Времена изменились и разработка интерфейса зачастую делается фреймворками основанными на JS.

Где может пригодиться?

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

На JS

Определение ширины или высоты монитора

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

Все же остается вероятность того, что пользователь собственноручно отключить обработку JS в браузере. В современном мире шансы равны 0,00001%.

Размер окна и масштаб внутри окна браузера.

В JS, чтобы определить размеры экрана, нужно использовать:

Ниже я привел работающий пример как можно узнать размеры экрана на JS:

Определение ширины и высоты окна браузера

Если нужно позиционировать любые элементы на странице, то более правильным решением будет использовать не размеры экрана, а размеры окна браузера. В JS это делается так:

Как отсканировать документ на компьютер с принтера и отправить по электронной почте

Соответственно вот пример использования:

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

На jQuery

Если У Вас уже есть подключенная библиотека jQuery, то можно узнать размеры окна с помощью нее. Хоть уже jQuery и старичок, от которого все пытаются избавиться, его нередко можно встретить даже в современных CMS системах.

Определение размеров монитора на jQuery

Определить размер монитора на jQuery у меня не получилось. Если у Вас есть готовое решение, то просьба написать в комментариях.

Для определения ширины или высоты окна браузера

Чтобы задействовать для нашей задачи jQuery, необходимо использовать код:

Комментарии

Другого нельзя? кроме Alert? например с помощью get запроса отправить куда нибудь и использовать эти данных ?

Вообще то alert без смысленно его видит человек. Мне надо использовать эти данных(height:width) чтоб изменит какието элементи: if ($height>=600) < #code… >else

Я вроде и написал, что пример бессмысленный. Главное же возможность

document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

спасибо автору он дал наводную инфу а дальше можно посмотреть или в стандарте или здесь http://www.w3schools.com/jquery/css_height.asp

Дмитрий: document.body.clientHeight возвращает 0 – почему? Пробовал в разных браузерах.

Я обновил статью и сейчас должно все работать как часы.

Релиз первого ядра Linux

Как определить размеры элементов сайта в браузере

Чтобы получать уведомления о всех исторических IT-событиях —

Если Вы используете материал моего блога, то будьте добры поставьте ссылку.

Источник

Как получить размеры экрана, окна и веб-страницы в 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. Заключение

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

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

Как обновить браузер на телефоне бесплатно

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

Источник

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

Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , >, screenX , screenY , которые будут работать во всех основных браузерах?

screenshot describing which values are wanted

17 ответов

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

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

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

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

Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта, используйте «console» или после нажатия «Inspect» .

Шаг 1 . Нажмите правую кнопку мыши, выберите «Проверить», а затем нажмите «Консоль».

Шаг 2 . Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме «Развернуть», необходимо сначала нажать кнопку «Развернуть» (присутствует в правом или левом верхнем углу) и отменить ее.

шаг 3 . Теперь напишите следующее после знака «больше» (‘>’), т.е.

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

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

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

Для глобального document . Для других документов, например во встроенном фрейме, к которому у вас есть доступ, передайте документ в качестве параметра:

Как удалить кэш сайта в Google Chrome

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

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

  • $( window ).height() является глючит в iOS, до такой степени, что он бесполезен
  • $( window ).width() и $( window ).height() являются ненадежно для мобильных устройств, поскольку они не справляются с эффектами мобильного масштабирования.

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

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

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

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

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

JavaScript

Для высоты:

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

Для ширины:

Для роста:

Для ширины .

Пожалуйста, прекратите редактировать этот ответ. Это было отредактировано 21 раз различными людьми, чтобы соответствовать их предпочтению формата кода. Также было отмечено, что это не требуется, если вы хотите ориентироваться только на современные браузеры — если это так, вам нужно только следующее:

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

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

В некоторых случаях, связанных с адаптивным макетом, $(document).height() может возвращать неверные данные, которые отображают только высоту порта просмотра. Например, когда у некоторого div # wrapper есть height: 100%, этот #wrapper может быть растянут на некоторый блок внутри него. Но его высота все равно будет как высота окна просмотра. В такой ситуации вы можете использовать

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

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

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

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

utilWidth и vendHeight — доступная ширина и высота экран (исключая панели задач ОС и тому подобное).

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

Как обновить браузер опера на ноутбуке бесплатно

Вы можете использовать объект 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 .

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

Bookmarklet

Исходный код

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

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

Источник
Рейтинг
Загрузка ...