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

Question

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

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

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

717 8

jQuery resize viewport size

8 ответов:

Comments

Ничего не найдено.

SimaWB · Accepted Answer · 2010-06-15 14:17:35

чтобы получить ширину и высоту области просмотра:
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
событие resize страницы:
$(window).resize(function() {

});

Vitalii Fedorenko · Accepted Answer · 2014-09-18 17:59:31

вы можете попробовать подразделения просмотра (CSS3):
div { 
  height: 95vh; 
  width: 95vw; 
}
поддержка браузеров

David L · Accepted Answer · 2016-09-11 14:15:17

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. Дополнительный совет, обратите внимание в сторону: Кроме того, если вы делаете сценарий, вы можете придумать тесты, чтобы помочь программистам в использовании ваши библиотеки, позвольте мне изобрести пару:

~~$(документ).готовые(функция() {~~
      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 ()", которая инициализирует библиотеку (поместите любую ссылку на $ внутри такой функции инициализации, включая объявление ready ()) и в начале такой функции" install_script ()", проверьте, определен ли$, но сделайте все независимым от JQuery, чтобы ваша библиотека могла" диагностировать себя", когда JQuery еще не определен. Я предпочитаю этот метод, а не заставлять автоматическое создание JQuery, приносящего его из CDN. Это крошечные заметки в сторону, чтобы помочь другим программистам. Я думаю, что люди, которые делают библиотеки, должны быть богаче в обратной связи с ошибками потенциального программиста. Например, Google Apis нужно в сторону руководство, чтобы понять сообщения об ошибках. Это абсурд, чтобы нуждаться во внешней документации для некоторых крошечных ошибок, которые не требуют от вас поиска руководства или спецификации. Библиотеки должны быть самодокументированы. Я пишу код даже заботясь об ошибках, которые я мог бы совершить даже через шесть месяцев, и он все еще пытается быть чистым и не повторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика.

forsvunnet · Accepted Answer · 2014-11-22 19:01:38

Вы можете использовать $(окно).изменить размер () для определения размера видового экрана.

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 viewport width и height calculation.

возможно, это может помочь в отношении iframe:
$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');
[1] Вы можете использовать $(окно).width() и $(окно).height (), чтобы получить число, которое будет правильным в некоторых браузерах, но неверным в других. В этих браузерах вы можете попробовать использовать окно.внутренняя ширина и окно.innerHeight, чтобы получить правильную ширину и высоту, но я бы посоветовал против этого метода, потому что он будет полагаться на агента пользователя нюхают.

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

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

D.A.H · Accepted Answer · 2013-09-20 02:19:09

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

SandroMarques · Accepted Answer · 2016-06-08 11:50:09

получить размер окна просмотра на загрузить и изменение размера (на основе ответа SimaWB):
function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

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

AnuRaj · Accepted Answer · 2016-06-10 12:43:32

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

user2573644 · Accepted Answer · 2013-09-06 23:04:47

для мобильных устройств, используйте:
    screen.availWidth or screen.availHeight