Проверить разрешение экрана онлайн
Разрешением экрана монитора называют размеры получаемого на экране изображения, соотношение ширина*высота в пикселях.
Для получения разрешения в единицах ppi данное количество пикселей необходимо
поделить на физические размеры экрана, выраженные в дюймах.
Глубина цвета — это количество бит, используемое для хранения и представления цвета
при кодировании одного пикселя растровой графики или видеоизображения.
Внешние размеры окна браузера — это размеры странички внутри браузера,
плюс размеры тулбаров и служебных панелей вашего браузера.
Внутренние размеры окна браузера — это только размеры странички внутри браузера,
не считая размеры тулбаров и служебных панелей вашего браузера.
Получить размер экрана, текущей веб-страницы и окна браузера
Как я могу получить windowWidth , windowHeight , pageWidth , pageHeight , screenWidth , screenHeight , pageX , <
17 ответов
Вы можете получить размер окна или документа с помощью jQuery:
Для размера экрана вы можете использовать screen объект:
Вот как мне удалось получить ширину экрана в React JS Project:
Если ширина равна 1680, вернуть 570, иначе вернуть 200
Чтобы проверить высоту и ширину текущей загруженной страницы любого веб-сайта, используйте «console» или после нажатия «Inspect» .
Шаг 1 . Нажмите правую кнопку мыши, выберите «Проверить», а затем нажмите «Консоль».
Шаг 2 . Убедитесь, что экран вашего браузера не находится в режиме максимизации. Если экран браузера находится в режиме «Развернуть», необходимо сначала нажать кнопку «Развернуть» (присутствует в правом или левом верхнем углу) и отменить ее.
шаг 3 . Теперь напишите следующее после знака «больше» (‘>’), т.е.
Вы также можете получить ширину и высоту окна, избегая панелей инструментов браузера и других вещей. Это реальная полезная область в окне браузера .
Для этого используйте: Свойства window.innerWidth и window.innerHeight (см. Документ в w3schools).
В большинстве случаев это будет лучший способ, например, отображать идеально центрированный плавающий модальный диалог. Это позволяет вам рассчитывать позиции на окне, независимо от того, какое разрешение ориентации или размера окна использует браузер.
Если вам нужно по-настоящему пуленепробиваемое решение для ширины и высоты документа ( 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() , которые решают эти проблемы. Для получения дополнительной информации, пожалуйста, ознакомьтесь с документация.
С введением 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 .
Я написал небольшой букмарклет javascript, который вы можете использовать для отображения размера. Вы можете легко добавить его в свой браузер и всякий раз, когда вы щелкаете по нему, вы увидите размер в правом углу окна вашего браузера.
Здесь вы найдете информацию, как использовать букмарклет https://en.wikipedia.org/wiki/Bookmarklet
Bookmarklet
Исходный код
Оригинальный код в кофе:
В основном, код предшествует небольшому div, который обновляется при изменении размера вашего окна.
Определяем размер окна браузера (JavaScript, jQuery)
Для чего нужно определять размер окна браузера, для тех случаев когда нам необходимо сделать например резиновый дизайн или чтобы блок целиком закрывал всю область окна браузера
на jQuery это делается так:
doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();
но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );>);
На 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 < windowHeight) <
pageHeight = windowHeight;
> else <
pageHeight = yScroll;
>
// for small pages with total width less then width of the viewport
if(xScroll < windowWidth) <
pageWidth = windowWidth;
> else <
pageWidth = xScroll;
>