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

308

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

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

jquery  resize  size  viewport 
— Volomike
источник
Любая идея, как получить область, которая видна на экране устройства, а не только то, что он может прокрутить? Я вижу, что $ (window) .height () возвращает всю ширину документа, а не ту часть, которая увеличена. Я хочу знать, сколько видно после применения масштабирования.
— Фрэнк Швитерман
appelsiini.net/projects/viewport Это должно сделать это! :)
— Mackelito
1
Это не прямой ответ на вопрос, но может быть удобно для тех, кто хочет манипулировать селекторами в соответствии с их положением и видимостью относительно окна просмотра: appelsiini.net/projects/viewport (плагин)
— Уоллес Сидре

Ответы:

484

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

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

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

$(window).resize(function() {

});
— SimaWB
источник
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, где мне нужно было это для работы.
— Volomike
48
Любая идея, как получить область, которая видна на экране устройства, а не только то, что он может прокрутить? Я вижу, что $ (window) .height () возвращает всю ширину документа, а не ту часть, которая увеличена. Я хочу знать, сколько видно после применения масштабирования.
— Фрэнк Швитерман
9
На самом деле, innerWidth/ innerHeightправильнее использовать (покрывая масштабирование).
18
@FrankSchwieterman Возможно, ваш браузер ведет себя не так, как вы хотите: возможно, вы столкнулись с этой проблемой: stackoverflow.com/q/12103208/923560 . Убедитесь, что ваш HTML-файл содержит правильное DOCTYPEобъявление, например <!DOCTYPE html>.
— Абдул
21
Это совершенно неправильно. Это дает вам размер документа, а не область просмотра (размер окна в документе).
— Майк Бетани
26

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

— Дэвид Л
источник
2
Очень тяжело читать твой пост. Пожалуйста, переделайте свой пост, чтобы привыкнуть к уценке StackExchange, как и все остальные. Есть причина, по которой сайты StackExchange не используют TinyMCE , но если вы разбираетесь в этом, присоединяйтесь к Meta .
— Volomike
Немного странно, что вы проверяете доступность $после того, как уже использовали $для вызова $(document).ready(function() { } );. Хорошо, если вы проверите, доступен ли jQuery, но сейчас уже слишком поздно.
— Machiel
@Machiel, ты совершенно прав. К счастью, я просто пошел, чтобы проверить свои сценарии, и они не используют готовое событие. Да, спасибо, я чувствовал себя глупо, когда вы сказали это, но, к счастью, я только что проверил, что в моих скриптах проверка находится внутри функции с именем "install_this_script ()", и в такой установке я вызываю функцию init библиотеки, но перед этим я проверяю (ВНЕ JQUERY), определен объект $ или нет. СПАСИБО ВСЕГДА, братан, ты меня действительно бесил! Я боюсь, что этот пост был здесь слишком долго, я надеюсь, что эта ошибка не принесла много вреда другим читателям. Я исправил пост.
— Дэвид Л
Это должен быть реальный ответ! Спасибо!
— Джастин Т. Уоттс
6

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

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

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

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

getViewport();

$(window).resize(function() {
    getViewport()
});
— SandroMarques
источник
1

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

— Д
источник
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.