Итак, задача такая – проверить отображение каких-то элементов на разных разрешениях экрана.
Но современная проблема в том, что сейчас большинство использует ноутбуки с высоким разрешением экрана. При масштабе в 100% и разрешением 3456*2160px на экране все будет на столько мелким, что с нормальным зрением работать будет тяжело и неудобно, поэтому рекомендуемые параметры масштаба – 250%, благодаря чему иконки и шрифты имеют привычные размеры, а высокое разрешение позволяет отображать максимально качественную картинку без видимых пикселей. При масштабе 250% реальные параметры экрана будут 1383*864px.
Отсюда следует проблема, когда кто-то проверяет сайт у себя в браузере и думает, что разрешение экрана 1920*1080 на 15 дюймовом ноуте, то на самом деле при рекомендуемом масштабе 125% реальный размер экрана получается 1536*864px.
Бороться с этой проблемой не нужно, но придется ее учитывать при верстке адаптивного сайта, понятно, что сайт должен выглядеть правильно при любой ширине экрана, но какие-то граничные точки (breakpoints) возможно придется изменить, чтобы учесть, что если ширина экрана меньше 1540 или 1400 – то это уже с большой вероятностью ноутбук, а значит и высота экрана будет меньше и можно уменьшить вертикальные отступы и размеры блоков.
В общем, следующий код нужен для того, чтобы задетектить какая рабочая область браузера у проверяющего, можно проверить свое разрешение или скинуть ссылку на статью тому, у кого надо узнать разрешение экрана.
Важно учитывать, что различные панели инструментов браузера (тулбары) и даже панель з недавними загрузками отнимают высоту окна браузера, и это отобразится в вычислениях.
Пример реализации вычисления высоты и ширины окна браузера
Ваши параметры:
Код для проверки ширины и высоты рабочей области браузера:
$(document).ready(function () {
(function checkWindow() {
alert("width=" + $(window).width() + ", height=" + $(window).height());
})();
});