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

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

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

Ответы

Ответ 1

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

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

изменить размер страницы:

$(window).resize(function() {

});

Ответ 3

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

script $(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">

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

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

$(document).ready(function() {

      if(typeof $=='undefined') {
        alert("PROGRAMMER Error: you haven't called JQuery library");
      } else if (typeof $.ui=='undefined') {
        alert("PROGRAMMER 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, "ДОПОЛНИТЕЛЬНЫЙ наконечник, обратите внимание": @Machiel, вчера комментарий (2014-09-04), был ТОЧНО правым: проверка $не может быть внутри готового события JQuery, потому что мы, как он отметил, считая, что $уже определено. СПАСИБО ЗА ТО, ЧТОБЫ УЧИТЬСЯ, и, пожалуйста, остальные читатели исправляют это, если вы использовали его в своих сценариях. Мое предложение: в ваших библиотеках помещается функция "install_script()", которая инициализирует библиотеку (помещает любую ссылку на $внутри такой функции init, включая объявление ready()), и НА НАЧАЛО такой функции "install_script()", проверьте, определено ли значение $, но сделайте все независимым от JQuery, поэтому ваша библиотека может "диагностировать себя", когда JQuery еще не определен. Я предпочитаю этот метод вместо того, чтобы заставлять автоматическое создание JQuery, принося его из CDN. Это крошечные заметки в сторону, чтобы помочь другим программистам. Я думаю, что люди, которые делают библиотеки, должны быть богаче в отзывах потенциальных ошибок программиста. Например, Google Apis нуждается в справочном руководстве для понимания сообщений об ошибках. Это абсурдно, нужна внешняя документация для некоторых крошечных ошибок, которые вам не нужны, чтобы искать и искать руководство или спецификацию. Библиотека должна быть САМОУПРАВЛЕННОЙ. Я пишу код, даже заботясь о тех ошибках, которые я мог бы совершить, даже через шесть месяцев, и он по-прежнему пытается быть чистым и не повторяющимся кодом, уже написанным для предотвращения будущих ошибок разработчика.

Ответ 4

Вы можете использовать $(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

Ответ 5

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

Ответ 6

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);
    });

Ответ 7

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

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

getViewport();

$(window).resize(function() {
    getViewport()
});

Ответ 8

Для мобильных устройств используйте:

    screen.availWidth or screen.availHeight