Как определить размер окна с помощью jQuery?

На веб-странице нельзя определить разрешение дисплея. Существует выражение CSS Media Queries для этого, но оно плохо реализовано на большинстве устройств и браузеров, если вообще реализовано. Однако вам не нужно знать разрешение дисплея, потому что его изменение приводит к изменению (пиксельной) ширины окна, которую можно обнаружить, используя методы, описанные другими участниками:

$(window).resize(function() {
  // Этот код выполнится каждый раз, когда изменяется размер окна
  $(window).height(); // Новая высота
  $(window).width(); // Новая ширина
});

Вы также можете использовать CSS Media Queries в браузерах, которые их поддерживают, для адаптации стиля вашей страницы под различные ширины дисплея. Но на самом деле вам стоит использовать единицы em, проценты, а также свойства min-width и max-width в вашем CSS, если вы хотите получить действительно гибкую компоновку. Вероятно, Gmail использует комбинацию всех этих подходов.

Вы можете создать один div где-то на странице и использовать следующий код:

<div id="winSize"></div>
<script>
    var WindowsSize = function() {
        var h = $(window).height(),
            w = $(window).width();
        $("#winSize").html("<p>Ширина: " + w + "<br>Высота: " + h + "</p>");
    };
    $(document).ready(WindowsSize); 
    $(window).resize(WindowsSize); 
</script>

Вот фрагмент кода:

var WindowsSize = function() {
    var h = $(window).height(),
        w = $(window).width();
    $("#winSize").html("<p>Ширина: " + w + "<br>Высота: " + h + "</p>");
};
$(document).ready(WindowsSize); 
$(window).resize(WindowsSize); 

А вот CSS для стилизации вашего окна:

#winSize {
    position: fixed;
    bottom: 1%;
    right: 1%;
    border: rgba(0, 0, 0, 0.8) 3px solid;
    background: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    color: #fff;
    text-shadow: #000 1px 1px 1px, #000 -1px 1px 1px;
    z-index: 9999;
}

Не забудьте подключить библиотеку jQuery перед этим кодом:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="winSize"></div>

Конечно, адаптируйте это под свои нужды! 😉

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

$(window).height();
$(window).width();

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

$(window).resize(function() {
    // Выполните необходимые действия
});

Если у вас есть дополнительные вопросы, не стесняйтесь задавать их!

Конечно! Вот перевод вашего текста в стиле ответа на StackOverflow:

// Получаем размеры окна
var height = $(window).height();
var width = $(window).width();

// Обновляем страницу при изменении размера окна
$(window).resize(function() {
  location.reload(true);
});

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

Вы также можете использовать обычный Javascript window.innerWidth для сравнения ширины.

Однако, используйте метод jQuery .resize(), который срабатывает автоматически:

$(window).resize(function() {
  // ваш код...
}); 

Дополнительную информацию можно найти здесь: jQuery API - resize()