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

290

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

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

  • 0
    Любая идея, как получить область, которая видна на экране устройства, а не только то, что он может прокрутить? Я вижу, что $ (window) .height () возвращает всю ширину документа, а не ту часть, которая увеличена. Я хочу знать, сколько видно после применения масштабирования.
  • 0
    appelsiini.net/projects/viewport Это должно сделать это! :)
Показать ещё 1 комментарий
Теги:
resize
viewport
size

8 ответов

478
Лучший ответ

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

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

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

$(window).resize(function() {

});
Поделиться
  • 18
    Я проверял это на Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 и Safari 5.0 (7533.16). Это работает последовательно на все это. Я также тестировал FF3.6.3 на Ubuntu, и он там тоже работает. Я думаю, что я использую jQuery 1.3 с WordPress 2.9.2, где мне нужно было это для работы.
  • 48
    Любая идея, как получить область, которая видна на экране устройства, а не только то, что он может прокрутить? Я вижу, что $ (window) .height () возвращает всю ширину документа, а не ту часть, которая увеличена. Я хочу знать, сколько видно после применения масштабирования.
Показать ещё 12 комментариев
35

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

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

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

Поделиться
  • 2
    не работает для всех мобильных браузеров или Ipad
24

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 нуждается в справочном руководстве для понимания сообщений об ошибках. Это абсурдно, нужна внешняя документация для некоторых крошечных ошибок, которые вам не нужны, чтобы искать и искать руководство или спецификацию. Библиотека должна быть САМОУПРАВЛЕННОЙ. Я пишу код, даже заботясь о тех ошибках, которые я мог бы совершить, даже через шесть месяцев, и он по-прежнему пытается быть чистым и не повторяющимся кодом, уже написанным для предотвращения будущих ошибок разработчика.

Поделиться
  • 2
    Очень тяжело читать твой пост. Пожалуйста, переделайте свой пост, чтобы вы привыкли к уценке StackExchange, как и все остальные. Есть причина, по которой сайты StackExchange не используют TinyMCE , но если вы разбираетесь в этом, присоединяйтесь к Meta .
  • 0
    Немного странно, что вы проверяете наличие $ после того, как уже использовали $ для вызова $(document).ready(function() { } ); , Хорошо, если вы проверите, доступен ли jQuery, но сейчас уже слишком поздно.
Показать ещё 2 комментария
5

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

Поделиться
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);
    });
Поделиться
  • 0
    Использование $ (window) .height () не даст вам размер области просмотра, он даст вам размер всего окна, которое обычно является размером всего документа, хотя документ может быть даже больше.
  • 0
    отлично подходит для ширины!
1

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

Поделиться
0

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

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

getViewport();

$(window).resize(function() {
    getViewport()
});
Поделиться
-3

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

    screen.availWidth or screen.availHeight
Поделиться
  • 1
    Ответ вводит в заблуждение. экран <> окно просмотра.
  • 0
    Свойство utilWidth возвращает ширину экрана пользователя в пикселях за вычетом функций интерфейса, таких как панель задач Windows. Но вопрос о браузере и о том, чтобы переопределить его, если размер страницы изменился?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню