Использование jQuery для получения размера области просмотра - PullRequest
Новая
       1

Использование jQuery для получения размера области просмотра

303 голосов
/ 15 июня 2010

Как мне использовать jQuery, чтобы определить размер окна просмотра браузера и переопределить его, если размер страницы изменился? Мне нужно внести размер IFRAME в это пространство (немного по каждому полю).

Для тех, кто не знает, окно просмотра браузера не соответствует размеру документа / страницы. Это видимый размер вашего окна до прокрутки.

Ответы [ 7 ]

478 голосов
/ 15 июня 2010

Чтобы получить ширину и высоту области просмотра: 

var viewportWidth = $(window).width();
var viewportHeight = $(window).height();

событие изменения размера страницы: 

$(window).resize(function() {

});
39 голосов
/ 27 мая 2013

Вы можете попробовать единицы просмотра (CSS3): 

div { 
  height: 95vh; 
  width: 95vw; 
}

Поддержка браузера

25 голосов
/ 06 марта 2014

1.Ответ на главный вопрос

Сценарий $(window).height() работает хорошо (показывает высоту области просмотра, а не документ с высотой прокрутки), НО это требует правильной установки тега doctype в документе,например, следующие типы документов:

Для HTML 5:

<!DOCTYPE html>

Для переходного HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

ВозможноТип документа по умолчанию, предполагаемый некоторыми браузерами, таков, что $(window).height() принимает высоту документа, а не высоту браузера.Со спецификацией doctype она удовлетворительно решена, и я уверен, что вы, peps, избежите «изменения переполнения прокрутки на скрытый и затем обратно», что, извините, немного подвох, особенно если вы неЗапишите его в коде для использования в будущем программистом.

2.ДОПОЛНИТЕЛЬНЫЙ совет, обратите внимание: Более того, если вы делаете скрипт, вы можете изобрести тесты, чтобы помочь программистам в использовании ваших библиотек, позвольте мне изобрести пару:

$ (документ).ready (function () {

      if(typeof $=='undefined') {
        alert("PROGRAMMER'S Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER'S Error: you haven't installed the UI Jquery library");
      }
      if(document.doctype==null || screen.height < parseInt($(window).height()) ) {
        alert("ERROR, check your doctype, the calculated heights are not what you might expect");
      }

});

РЕДАКТИРОВАТЬ: о части 2, "ДОПОЛНИТЕЛЬНЫЙ совет, примечаниеaside ": @Machiel во вчерашнем комментарии (2014-09-04) был совершенно прав: проверка $ не может быть внутри события ready Jquery, потому что мы, как он указал, предполагая, что $ уже определено,СПАСИБО, ЧТОБЫ УКАЗАТЬ ЭТО, и, пожалуйста, остальным читателям исправьте это, если вы использовали это в своих сценариях.Мое предложение: в ваших библиотеках поместите функцию "install_script ()", которая инициализирует библиотеку (поместите любую ссылку на $ внутри такой функции init, включая объявление ready ()) и В НАЧАЛЕ такой функции "install_script ()"проверьте, определен ли $, но сделайте все независимым от JQuery, чтобы ваша библиотека могла «диагностировать себя», когда JQuery еще не определен.Я предпочитаю этот метод, а не принудительное автоматическое создание JQuery с использованием CDN.Это крошечные заметки для помощи другим программистам.Я думаю, что люди, которые делают библиотеки, должны быть богаче в ответ на ошибки потенциальных программистов.Например, Google Apis нужно дополнительное руководство для понимания сообщений об ошибках.Это абсурдно, требовать внешнюю документацию для каких-то крошечных ошибок, которые не требуют, чтобы вы пошли искать руководство или спецификацию.Библиотека должна быть САМОДОКУМЕНТИРОВАНА.Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и не повторяющимся кодом, уже написанным для предотвращения будущих ошибок разработчика.

5 голосов
/ 26 августа 2013

Вы можете использовать $ (window) .resize (), чтобы определить, изменился ли размер области просмотра.

jQuery не имеет какой-либо функции для правильного определения правильной ширины и высоты области просмотра [1] при наличии полосы прокрутки.

Я нашел решение, которое использует библиотеку Modernizr и, в частности, функцию mq, которая открывает медиазапросы для javascript.

Вот мое решение: 

// A function for detecting the viewport minimum width.
// You could use a similar function for minimum height if you wish.
var min_width;
if (Modernizr.mq('(min-width: 0px)')) {
    // Browsers that support media queries
    min_width = function (width) {
        return Modernizr.mq('(min-width: ' + width + ')');
    };
}
else {
    // Fallback for browsers that does not support media queries
    min_width = function (width) {
        return $(window).width() >= width;
    };
}

var resize = function() {
    if (min_width('768px')) {
        // Do some magic
    }
};

$(window).resize(resize);
resize();

Мой ответ, вероятно, не поможет изменить размер iframe до 100% ширины области просмотра с полями с каждой стороны, но я надеюсь, что он обеспечит утешение для веб-разработчиков, разочарованных несогласованностью браузером вычисления ширины и высоты области просмотра javascript.

Может быть, это может помочь в отношении iframe: 

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Вы можете использовать $ (window) .width () и $ (window) .height (), чтобы получить число, которое будет правильным в некоторых браузерах, но неверным в других. В этих браузерах вы можете попытаться использовать window.innerWidth и window.innerHeight, чтобы получить правильную ширину и высоту, но я бы советовал не использовать этот метод, потому что он будет полагаться на сниффинг пользовательского агента.

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

Примечание. И $ (window) .width (), и window.innerWidth различаются в разных операционных системах, использующих один и тот же браузер. Смотри: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

2 голосов
/ 10 июня 2016 
function showViewPortSize(display) {
    if (display) {
        var height = window.innerHeight;
        var width = window.innerWidth;
        jQuery('body')
            .prepend('<div id="viewportsize" style="z-index:9999;position:fixed;bottom:0px;left:0px;color:#fff;background:#000;padding:10px">Height: ' + height + '<br>Width: ' + width + '</div>');
        jQuery(window)
            .resize(function() {
                height = window.innerHeight;
                width = window.innerWidth;
                jQuery('#viewportsize')
                    .html('Height: ' + height + '<br>Width: ' + width);
            });
    }
}
$(document)
    .ready(function() {
        showViewPortSize(true);
    });
1 голос
/ 08 июня 2016

Чтобы получить размер области просмотра при загрузке и при изменить размер (на основе ответа SimaWB): 

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
1 голос
/ 20 сентября 2013

Обратите внимание, что CSS3 единицы просмотра (vh, vw) не будут хорошо работать на iOS. Когда вы прокручиваете страницу, размер области просмотра каким-то образом пересчитывается, и ваш размер элемента, который использует единицы области просмотра, также увеличивается.Итак, на самом деле требуется некоторый JavaScript.

...