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

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

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

300
jquery resize size viewport

8 ответов

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

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

событие resize страницы:

$(window).resize(function() {

});
468

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

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

поддержка браузеров

38

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

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

для 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 она удовлетворительно решена, и я уверен, что вы 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");
      }

});

EDIT: о части 2, " дополнительный совет, обратите внимание в сторону": @Machiel, во вчерашнем комментарии (2014-09-04), был совершенно прав: проверка $ не может быть внутри готового события Jquery, потому что мы, как он указал, предполагая, что $ уже определен. Спасибо, что указали на это, и сделайте, пожалуйста, остальную часть вы, читатели, исправьте это, если вы использовали его в своих сценариях. Мое предложение: в ваших библиотеках поместите функцию " install_script ()", которая инициализирует библиотеку (поместите любую ссылку на $ внутри такой функции init, включая объявление ready ()), и в начале такой функции" install_script () "проверьте, определен ли$, но сделайте все независимым от JQuery, чтобы ваша библиотека могла" диагностировать себя", когда JQuery еще не определен. Я предпочитаю этот метод, а не принуждение автоматическое создание JQuery, выводящего его из CDN. Это крошечные заметки в сторону для помощи другим программистам. Я думаю, что люди, которые делают библиотеки, должны быть богаче в обратной связи с ошибками потенциального программиста. Например, Google Apis нужно руководство в сторону, чтобы понять сообщения об ошибках. Это абсурд, нуждаться во внешней документации для некоторых крошечных ошибок, которые не нужно искать в руководстве или спецификации. Библиотека должна быть задокументирована. Я пишу код даже заботясь об ошибках, которые я могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и не повторяющимся кодом, уже написанным, чтобы предотвратить ошибки будущего разработчика.

24

вы можете использовать $(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.внутренняя ширина и окно.innerHeight, чтобы получить правильную ширину и высоту, но я бы посоветовал этот метод, потому что он будет полагаться на нюхание агента пользователя.

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

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

5

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

1

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

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

getViewport();

$(window).resize(function() {
    getViewport()
});
1
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

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

    screen.availWidth or screen.availHeight
-3