Разрешение экрана и размеры окна браузера

Для создания адаптивных сайтов, контейнеров, для выравнивания элементов и для многих других целей может понадобиться вычислить разрешение экрана пользователя открывшего сайт или размеры окна браузера, в котором отображается сайт. Конечно, размер будет зависеть еще и от размеров монитора, на котором отображается открытый сайт. А типоразмеров мониторов бесконечное число. И не всегда эту информацию можно найти в интернете. Да если и можно найти, то на это приходится тратить время. Ну вот к примеру, если вы не знаете размеры в пикселях экрана монитора AOC AG241QG 23, то попробуйте засечь время, которое вам понадобится, чтобы найти в интернете эти размеры. А есть хитрый способ - добавить скрипт на ваш сайт, который сразу показывает эти размеры. А так как вам ну просто обязательно надо добиться, чтобы хотя бы на мониторе заказчика (шутка) разрабатываемый сайт отображался адекватно, то скрипт точно пригодится, когда будете вместе с заказчиком на его компьютере просматривать результаты вашей работы.

Для решения этой задачи есть разные средства. Рассмотрим один из таких способов с применением javascript и jQuery. Для начала немного теории:

screen.width. Определяет ширину экрана (монитора).
screen.height. Определяет высоту экрана (монитора).
document.body.clientWidth. Определяет ширину браузера.
document.body.clientHeight. Определяет высоту браузера.
$(window).width(). Определяет ширину браузера при наличии jQuery.
$(window).height(). Определяет высоту браузера при наличии jQuery.

А дальше примеры скриптов для решения перечисленных выше задач. Например, для нахождения и вывода на экран разрешения экрана можно использовать скрипт:

document.write('Разрешение экрана: '+screen.width+'×
'+screen.height+'px.'); 

Результат работы такого скрипта:

---

---

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

document.write('Размеры окна браузера: 
'+$(window).width()+'×'+$(window).height()+'px.'); 

Пример работы такого скрипта:

---

---