Размер 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
Редактировать: Обновлен код JavaScript для поддержки IE8 и более ранних версий.
Ах да, забыл про фрейм. Спасибо!
Чтобы получить размер браузера, включая меню и панель инструментов, используйте
window.outerWidth а такжеwindow.outerHeight, Там'Однако такая опция недоступна для IE8 и более ранних версий. Смотрите следующий пост:stackoverflow.com/questions/6291780/...Когда демонстрация выполняется в jsfiddle, она сообщает размер IFrame, в котором запускается демонстрация. Когда демонстрация запускается на отдельной странице, она сообщает размер окна просмотра браузера. Я проверил это в обоих направлениях. Казалось, работает нормально.
Спасибо за твой код, но я бы нет использовать "document.body.clientHeight» как запасной вариант, поскольку он дает неправильные значения в нескольких браузерах (если только это значение не является правильным в браузерах, которые неt поддерживают две другие переменные; которые те, кстати?).
Есть ли способ определения фактической высоты и ширины браузера?
Мне это нужно, чтобы понять, почему мои медиа-запросы не работают для iPad. Спасибо огромное. Кстати, на iPad, когда вы меняете ориентацию, ширина остается той же самой ... так что в этом и заключается проблема. Мне нужно использоватьориентация» в моем медиа-запросе, чтобы правильно настроить таргетинг на iPad. Ваши сценарии работают прекрасно. Спасибо за JSfiddle. Одно интересное наблюдение: когда вы сжимаете и увеличиваете iPad, значения меняются для JS, но не для jQuery! Так что'Приятно иметь оба сценария.
Спасибо за этот полезный фрагмент кода. Хорошо работает человек.
используйте переменные ширины и высоты в любом месте, где вы хотите ... при любом изменении размера браузера это также изменит значение переменной ..
$(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>
Хм, этоне работает.
Хм, этоне работает "я"Я полагаю, что все фрагменты кода в переполнении стека должны делиться ссылкой на JSFiddle или CodePen, или, по крайней мере, те, кто их использует, должны иметь 10-кратное увеличение своей репутации!
при каждом вызове onresize вы можете изменить содержимое окна результатов. Кстати, какую информацию вы показываете. Если вы показываете высоту и ширину, просто используйте: $ ('#resultboxid») .Html (»рост:' + ч + ' ширина: ' ж) Я
Как бы я отобразил результаты тогда?
@ user1658756 Я изменил метод onresize. Вы можете изменить код в соответствии с вашими требованиями или поделиться своим кодом, чтобы я мог вносить изменения в соответствии с вашим кодом
Я не могу помочь тебе, пока ты не покажешь мне свой код. "
+1, если не работает, используйте эту строку $ ('#resultboxid») .Html (»высота = ' + ч + ' ширина: ' + ш); проблема конкатенации, замеченная в ответе. Спасибо
м просто смотрит на отображение ширины и высоты.