Как получить разрешение экрана js

Обновлено: 21.11.2024

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

Разница между экраном, окном и веб-страницей в JavaScript

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

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

Окно браузера (обозначено бирюзовым цветом) Это браузер, в котором будет отображаться ваш веб-сайт. Браузер может быть Google Chrome, Microsoft Edge, Mozilla Firefox и т. д. Как мы все знаем, мы можем изменить размер окна браузера так, как нам хочется, что в конечном итоге изменит его ширину и высоту.

Например, на изображении выше веб-страница Google больше по размеру, чем окно нашего браузера. На экране могут отображаться только некоторые части веб-страницы. А остальная часть будет видна пользователю только при прокрутке страницы по горизонтали или по вертикали. Когда мы говорим о размере веб-страницы, мы имеем в виду всю веб-страницу, независимо от того, какая часть веб-страницы в данный момент видна пользователю.

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

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

Внутри тега body у нас есть тег h2, который будет печатать заголовок Sizes . Затем у нас есть 3 тега абзаца внутри него, мы покажем ширину и высоту экрана, окна и страницы.

Чтобы получить размер экрана компьютера, ноутбука или планшета, вы должны использовать screen.width , который даст вам ширину экрана, и screen.height, чтобы получить высоту экрана.

Чтобы получить размер окна браузера, вы должны использовать объект окна. Каждая вкладка браузера будет иметь свой объект окна. Этот объект содержит различные свойства, связанные с содержимым этой вкладки или окна браузера. Объект окна имеет что-то, называемое innerWidth и innerHeight, что в конечном итоге предоставит нам ширину и высоту окна браузера.

Как мы все знаем, объект документа представляет наш веб-сайт, и вся информация, связанная с веб-страницей, хранится внутри этого объекта. Чтобы получить ширину веб-страницы, мы должны использовать document.documentElement.scrollWidth, а чтобы получить высоту веб-страницы, мы должны использовать document.documentElement.scrollHeight. ScrollWidth и scrollHeight представляют всю ширину и высоту веб-страницы.

Теперь, когда у нас есть все размеры нашего экрана, окна и веб-страницы, пришло время добавить эти значения в тег абзацев, который мы создали в нашем HTML-документе. Сначала нам нужно получить все теги абзаца, используя их идентификаторы в JavaScript, а затем мы можем использовать свойство innerHTML для установки значений.

Статьи DelftStack написаны такими же фанатами программного обеспечения, как и вы. Если вы также хотите внести свой вклад в DelftStack, написав платные статьи, вы можете посетить страницу «Написать для нас».

сообщить об этом объявлении

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

Но по моему опыту, легко запутаться в куче размеров: размеры экрана, окна, веб-страницы.

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

Содержание

1.1 Размер экрана

Размер экрана — это ширина и высота экрана: монитора или мобильного экрана.

window.screen — это объект, содержащий информацию о размере экрана. Вот как получить доступ к ширине и высоте экрана:

1.2 Доступный размер экрана

Доступный размер экрана состоит из ширины и высоты активного экрана без панелей инструментов операционной системы.

Чтобы получить доступ к доступному размеру экрана, вы можете снова использовать объект window.screen:

2.1 Внешний размер окна

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

Чтобы получить доступ к размеру внешнего окна, вы можете использовать свойства externalWidth и externalHeight, которые доступны непосредственно в объекте окна:

2.2 Внутренний размер окна

Внутренний размер окна (он же размер области просмотра) состоит из ширины и высоты области просмотра, в которой отображается веб-страница.

объект окна предоставляет необходимые свойства innerWidth и innerHeight:

Если вы хотите получить доступ к внутреннему размеру окна без полос прокрутки, вы можете использовать следующее:

<р>3. Размер веб-страницы

Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.

Используйте следующее, чтобы получить доступ к размеру содержимого веб-страницы (включая заполнение страницы, но не границы, поля или полосы прокрутки):

Если pageHeight больше внутренней высоты окна, отображается вертикальная полоса прокрутки.

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

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

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

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

Пиксель – это крошечная точка. Тысячи и миллионы этих точек составляют изображение на вашем экране. Разрешение вашего экрана — это количество точек, которое может отображать ваш экран по горизонтали и вертикали. Это не определяется размером экрана. Если у вас 17-дюймовый экран, его разрешение не обязательно должно быть выше, чем у 13-дюймового экрана.

Когда вы увидите свое разрешение экрана, оно будет выглядеть как уравнение умножения. Например, 1280 x 800. Это означает, что он может отображать 1280 пикселей по горизонтали и 800 пикселей по вертикали.

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

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

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

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

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

Windows 8

<р>1.Щелкните правой кнопкой мыши на рабочем столе, выберите разрешение экрана, измените разрешение на нужное с помощью ползунка, нажмите «Применить».

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

Windows 7

Щелкните правой кнопкой мыши на рабочем столе, выберите разрешение экрана и выберите нужное разрешение в раскрывающемся списке, выберите "ОК", а затем выберите "Сохранить изменения"

Windows Vista

Щелкните правой кнопкой мыши на рабочем столе и выберите параметр «Персонализация», выберите «Параметры отображения», переместите ползунок от низкого до высокого, чтобы изменить разрешение. Выберите «ОК», а затем, когда вас спросят, хотите ли вы сохранить настройки отображения, нажмите «Да».

Windows XP

Щелкните правой кнопкой мыши на рабочем столе и выберите свойства. Нажмите на вкладку настроек и переместите ползунок от меньшего к большему. Выберите «ОК», а когда вас спросят, хотите ли вы сохранить изменения, выберите «Да».

Убунту Линукс

Нажмите системное меню, перейдите к настройкам, затем отобразите, щелкните раскрывающееся меню разрешения и выберите нужное разрешение. Нажмите «Применить», затем подтвердите внесенные изменения.

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

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

К счастью для нас, есть встроенные функции JavaScript, которые могут легко захватывать различные размеры экрана на устройстве пользователя в пикселях. То, что вы используете, зависит от того, что вы хотите сделать.

Получить разрешение пользователя

Возможно, вы захотите сделать что-то, связанное с разрешением устройства пользователя. В этом случае следует использовать встроенные свойства screen.width и screen.height. Они дают вам размер экрана, с которым вы имеете дело.

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

Получить размер браузера

Возможно, существует интересное приложение для работы с текущим размером браузера. Если вам нужен доступ к этим измерениям, используйте для этого свойства screen.availWidth и screen.availHeight.

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

Интересное примечание: screen.availHeight также можно использовать для определения высоты панели задач на компьютере. Если разрешение вашего браузера, скажем, 1366 x 768 , а screen.availHeight сообщает о 728 пикселях, то ваша панель задач имеет высоту 40 пикселов. Вы также можете вычислить высоту панели задач, вычитая screen.height и screen.availHeight:

Получить размер окна просмотра

Эти свойства интересны и могут быть использованы для создания отличных эффектов. Вы можете использовать window.innerHeight и window.innerWidth, чтобы получить размер окна веб-страницы, как ее видит пользователь.

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

Если, например, вы работаете в Google Chrome и открываете консоль (она должна быть закреплена сбоку от окна), значение window.innerHeight изменится, чтобы отразить высоту консоли, поскольку часть окна будет заблокирован.

Вы можете проверить это, вызвав window.innerHeight , записав значение, увеличив размер консоли и снова вызвав window.innerHeight.

Эти свойства также изменятся, если ваш браузер будет развернут или изменен каким-либо образом. При максимальном размере браузера свойство window.innerWidth совпадает со свойствами screen.width и screen.availWidth (если сбоку нет панели задач, в этом случае screen.availWidth не будет равно). window.innerHeight равно площади окна самой страницы (площади веб-страницы).

Получить высоту и ширину веб-страницы

Если вам нужно увидеть, насколько на самом деле велика или широка ваша веб-страница, существуют свойства для захвата этих размеров: document.body.offsetWidth и document.body.offsetHeight .

Эти свойства представляют размер содержимого в теле самой страницы. Страница без содержимого имеет document.body.offsetHeight близкое к тому же значению, что и window.innerHeight, в зависимости от того, какие поля/отступы установлены в теле документа. Если поля и отступы установлены на 0 в корневом элементе html и теле документа, тогда document.body.offsetHeight и window.innerHeight будут равны без содержания.

Эти свойства можно использовать для взаимодействия с вашей страницей/приложением в зависимости от того, что вы хотите сделать.

Читайте также: