Как узнать ширину экрана js
Чтобы узнать ширину экрана, можно воспользоваться встроенным свойством window.innerWidth — оно возвращает ширину окна в пикселях включая ширину вертикальной полосы прокрутки.
console.log(window.innerWidth); // => 1920 Получение разрешения экрана
Возвращает — Разрешение экрана: 1138×640px. , хотя реальное разрешение 1366×768. Как получить правильное разрешение?
Отслеживать
371 1 1 золотой знак 5 5 серебряных знаков 13 13 бронзовых знаков
задан 12 авг 2013 в 0:24
89 1 1 золотой знак 1 1 серебряный знак 4 4 бронзовых знака
какой браузер/OS ?
12 авг 2013 в 0:37
firefox/windows
12 авг 2013 в 1:25
проверьте что zoom нет, и ещё я видел баг с windows vista какой-то на эту тему.
12 авг 2013 в 18:31
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Есть несколько вариантов определение экрана, это касается как десктопных браузеров, так и мобильных.
- Размеры экрана девайса\монитора
- Размеры окна браузера
- Размеры без инструментов браузера (навигационной панели например)
Первый вариант:
window.screen.width и window.screen.height отвечают за размеры экрана.
Второй вариант:
window.innerWidth и window.innerHeight отвечают за размер окна браузера.
Третий вариант:
window.screen.availWidth и window.screen.availHeight отвечают за непосредственный размер области отвечающей за вывод информации (очень полезно в мобильных браузерах)
Как в JavaScript получить размеры экрана, окна и веб-страницы
От автора: чтобы определить, находится ли окно браузера в альбомном или портретном режиме, вы можете сравнить ширину и высоту окна браузера. Но из моего опыта в куче размеров легко запутаться: размеры экрана, окна, веб-страницы. Как определяются эти размеры и, что важно, как получить к ним доступ, я расскажу в этом посте.
1. Экран
1.1 Размер экрана
Размер экрана — это ширина и высота экрана: монитор или мобильный экран.
window.screen — это объект, который содержит информацию о размере экрана. Вот как получить доступ к ширине и высоте экрана:
JavaScript
const screenWidth = window . screen . width ;
const screenHeight = window . screen . height ;
1.2 Доступный размер экрана
Доступный размер экрана состоит из ширины и высоты активного экрана без панелей инструментов операционной системы.
Для доступа к доступному размеру экрана вы можете снова использовать объект window.screen:
JavaScript
const availScreenWidth = window . screen . availWidth ;
const availScreenHeight = window . screen . availHeight ;
2. Окно
2.1 Внешний размер окна
Внешний размер окна состоит из ширины и высоты всего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Чтобы получить доступ к внешнему размеру окна, вы можете использовать свойство outerWidth и outerHeight, которые доступны непосредственно для объекта window:
JavaScript
const windowOuterWidth = window . outerWidth ;
const windowOuterHeight = window . outerHeight ;
2.2 Внутренний размер окна
Внутренний размер окна (он же размер области просмотра) состоит из ширины и высоты области просмотра, отображающей веб-страницу.
Объект window предоставляет необходимые свойства innerWidth и innerHeight:
JavaScript
const windowInnerWidth = window . innerWidth ;
const windowInnerHeight = window . innerHeight ;
Если вы хотите получить доступ к внутреннему размеру окна без полос прокрутки, вы можете использовать следующее:
JavaScript
const windowInnerWidth = document . documentElement . clientWidth ;
const windowInnerHeight = document . documentElement . clientHeigh ;
3. Размер веб-страницы
Размер веб-страницы состоит из ширины и высоты отображаемого содержимого страницы.
Используйте следующее для доступа к размеру содержимого веб-страницы (включая отступы страницы, но не границы, поля или полосы прокрутки):
JavaScript
const pageWidth = document . documentElement . scrollWidth ;
const pageHeight = document . documentElement . scrollHeight ;
Если pageHeight больше, чем внутренняя высота окна, то отображается вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь у вас есть лучшее представление о том, как определить различные виды размеров. Размер экрана — это размер всего экрана (или монитора), а доступный размер экрана — это размер монитора, исключая панели задач или панели инструментов ОС.
Внешний размер окна измеряет все окно браузера (включая адресную строку, панель вкладок, боковые панели, если они открыты), а внутренний размер окна — это размер области просмотра, где отображается веб-страница. Наконец, размер веб-страницы — это размер веб-страницы с ее содержимым.
Автор: Dmitri Pavlutin
Редакция: Команда webformyself.
Как получить размеры экрана, окна и веб-страницы в JavaScript?
Представляю Вашему вниманию перевод небольшой заметки «How to Get the Screen, Window, and Web Page Sizes in JavaScript» автора Dmitri Pavlutin.
Для определения ориентации окна браузера (ландшафтной или портретной) можно сравнить его ширину и высоту.
Однако во всевозможных доступных размерах легко запутаться: существуют размеры экрана, окна, веб-страницы и т.д.
Что означают эти размеры и, главное, как их получить? Именно об этом я и собираюсь рассказать.
1. Экран
1.1. Размер экрана
Размер экрана — это ширина и высота всего экрана: монитора или мобильного дисплея.
Получить информацию о размере экрана можно с помощью свойства screen объекта window :
const screenWidth = window.screen.width const screenHeight = window.screen.height 1.2. Доступный размер экрана
Доступный размер экрана — это ширина и высота активного экрана без панели инструментов операционной системы.
Для получения доступного размера экрана снова обращаемся к window.screen :
const availableScreenWidth = window.screen.availWidth const availableScreenHeight = window.screen.availHeight 2. Окно
2.1. Размер внешнего окна (или внешний размер окна)
Размер внешнего окна — это ширина и высота текущего окна браузера, включая адресную строку, панель вкладок и другие панели браузера.
Получить информацию о размере внешнего окна можно с помощью свойств outerWidth и outerHeight объекта window :
const windowOuterWidth = window.outerWidth const windowOuterHeight = window.outerHeight 2.2. Внутренний размер окна (или размер внутреннего окна)
Внутренний размер окна — это ширина и высота области просмотра (вьюпорта).
Объект window предоставляет свойства innerWidth и innerHeight :
const windowInnerWidth = window.innerWidth const windowInnerHeight = window.innerHeight Если мы хотим получить внутренний размер окна без полос прокрутки, то делаем следующее:
const windowInnerWidth = document.documentElement.clientWidth const windowInnerHeight = document.documentElement.clientHeight 3. Размер веб-страницы
Размер веб-страницы — это ширина и высота отображаемого содержимого (отрендеренного контента).
Для получения размера веб-страницы используйте следующее (включает в себя внутренние отступы страницы, но не включает границы, внешние отступы и полосы прокрутки):
const pageWidth = document.documentElement.scrollWidth const pageHeight = document.documentElement.scrollHeight Если pageHeight больше, чем внутренняя высота окна, значит, присутствует вертикальная полоса прокрутки.
4. Заключение
Надеюсь, теперь Вы понимаете, как получать различные размеры.
Размер экрана — это размер монитора (или дисплея), а доступный размер экрана — это размер экрана без панелей инструментов ОС.
Внешний размер окна — это размер активного окна браузера (включая поисковую строку, панель вкладок, открытые боковые панели и проч.), а внутренний размер окна — это размер области просмотра.
Наконец, размер веб-страницы — это размер контента.
Благодарю за внимание, друзья!
- Веб-разработка
- JavaScript
- Программирование