Размер Live Detect Browser - jQuery / JavaScript

Есть ли плагин jQuery или способ использовать прямой JavaScript для определения размера браузера.

Я бы предпочел, чтобы это были результатыжить'Так что, если ширина или высота изменится, результаты тоже будут.

Ответы на вопрос(5)

Вы имеете в виду что-то вроде этогоwindow.innerHeight; window.innerWidth $(window).height(); $(window).width()

Это должно вернуть видимую область:

document.body.offsetWidth
document.body.offsetHeight

Я думаю, это всегда равно размеру браузера?

Решение Вопроса

JavaScript

function jsUpdateSize(){
    // Get the dimensions of the viewport
    var width = window.innerWidth ||
                document.documentElement.clientWidth ||
                document.body.clientWidth;
    var height = window.innerHeight ||
                 document.documentElement.clientHeight ||
                 document.body.clientHeight;

    document.getElementById('jsWidth').innerHTML = width;  // Display the width
    document.getElementById('jsHeight').innerHTML = height;// Display the height
};
window.onload = jsUpdateSize;       // When the page first loads
window.onresize = jsUpdateSize;     // When the browser changes size

JQuery

function jqUpdateSize(){
    // Get the dimensions of the viewport
    var width = $(window).width();
    var height = $(window).height();

    $('#jqWidth').html(width);      // Display the width
    $('#jqHeight').html(height);    // Display the height
};
$(document).ready(jqUpdateSize);    // When the page first loads
$(window).resize(jqUpdateSize);     // When the browser changes size

демоверсия jsfiddle

Редактировать: Обновлен код JavaScript для поддержки IE8 и более ранних версий.

 user165875608 окт. 2012 г., 17:05
Ах да, забыл про фрейм. Спасибо!
 Matt Coughlin09 окт. 2012 г., 14:11
Чтобы получить размер браузера, включая меню и панель инструментов, используйтеwindow.outerWidth а такжеwindow.outerHeight, Там'Однако такая опция недоступна для IE8 и более ранних версий. Смотрите следующий пост:stackoverflow.com/questions/6291780/...
 Matt Coughlin08 окт. 2012 г., 17:02
Когда демонстрация выполняется в jsfiddle, она сообщает размер IFrame, в котором запускается демонстрация. Когда демонстрация запускается на отдельной странице, она сообщает размер окна просмотра браузера. Я проверил это в обоих направлениях. Казалось, работает нормально.
 OMA05 мая 2014 г., 23:07
Спасибо за твой код, но я бы нет использовать "document.body.clientHeight» как запасной вариант, поскольку он дает неправильные значения в нескольких браузерах (если только это значение не является правильным в браузерах, которые неt поддерживают две другие переменные; которые те, кстати?).
 user165875608 окт. 2012 г., 21:14
Есть ли способ определения фактической высоты и ширины браузера?
 Ricardo Parker19 дек. 2014 г., 23:35
Мне это нужно, чтобы понять, почему мои медиа-запросы не работают для iPad. Спасибо огромное. Кстати, на iPad, когда вы меняете ориентацию, ширина остается той же самой ... так что в этом и заключается проблема. Мне нужно использоватьориентация» в моем медиа-запросе, чтобы правильно настроить таргетинг на iPad. Ваши сценарии работают прекрасно. Спасибо за JSfiddle. Одно интересное наблюдение: когда вы сжимаете и увеличиваете iPad, значения меняются для JS, но не для jQuery! Так что'Приятно иметь оба сценария.
 Sedat Kumcu23 мая 2018 г., 08:01
Спасибо за этот полезный фрагмент кода. Хорошо работает человек.

используйте переменные ширины и высоты в любом месте, где вы хотите ... при любом изменении размера браузера это также изменит значение переменной ..

$(window).resize(function() {
    width = $(this).width());
    height = $(this).height());
});

ты можешь использовать

function onresize (){
   var h = $(window).height(), w= $(window).width();
   $('#resultboxid').html('height= ' + h + ' width: ' w);
}
 $(window).resize(onresize ); 

 onresize ();// first time;

HTML:

<span id="resultboxid"></span>
 user165875608 окт. 2012 г., 16:06
Хм, этоне работает.
 Ricardo Parker19 дек. 2014 г., 23:37
Хм, этоне работает "я"Я полагаю, что все фрагменты кода в переполнении стека должны делиться ссылкой на JSFiddle или CodePen, или, по крайней мере, те, кто их использует, должны иметь 10-кратное увеличение своей репутации!
 Anoop08 окт. 2012 г., 14:07
при каждом вызове onresize вы можете изменить содержимое окна результатов. Кстати, какую информацию вы показываете. Если вы показываете высоту и ширину, просто используйте: $ ('#resultboxid») .Html (»рост:' + ч + ' ширина: ' ж) Я
 user165875608 окт. 2012 г., 14:03
Как бы я отобразил результаты тогда?
 Anoop08 окт. 2012 г., 14:35
@ user1658756 Я изменил метод onresize. Вы можете изменить код в соответствии с вашими требованиями или поделиться своим кодом, чтобы я мог вносить изменения в соответствии с вашим кодом
 Anoop08 окт. 2012 г., 16:24
Я не могу помочь тебе, пока ты не покажешь мне свой код. "
 Muddasir Abbas30 июл. 2018 г., 03:44
+1, если не работает, используйте эту строку $ ('#resultboxid») .Html (»высота = ' + ч + ' ширина: ' + ш); проблема конкатенации, замеченная в ответе. Спасибо
 user165875608 окт. 2012 г., 14:30
м просто смотрит на отображение ширины и высоты.

Ваш ответ на вопрос