Разрешение экрана

Здесь показаны разрешение экрана, доступная область, размер окна браузера, плотность пикселей и соотношение сторон.

Все значения измеряются в браузере и обновляются при изменении размера окна.

Почему чисел несколько и все они разные

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

Плотность пикселей связывает пиксели CSS с физическими: на экране с плотностью 2 каждый пиксель CSS занимает четыре физических. Поэтому телефон с физическим разрешением 2340 точек по высоте сообщает странице куда меньшее число, и это правильно.

Зачем это нужно при вёрстке

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

Соотношение сторон полезно для изображений и видео: несовпадение соотношения контейнера и содержимого — самая частая причина неожиданных полей и обрезки.

Почему браузер округляет часть значений

Часть браузеров намеренно сообщает не точные размеры, а округлённые: если каждое окно рапортует одну из нескольких стандартных величин, посетители перестают различаться по этому признаку. Ради приватности здесь сознательно жертвуют точностью, и это стоит учитывать, если числа выглядят подозрительно круглыми.

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