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

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

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

8 Solutions collect form web for “Использование jQuery для получения размера windows просмотра”

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

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

resize страницы:

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

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

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

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

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">

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

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

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

Вы можете использовать $ (window) .resize (), чтобы определить, изменяется ли видовое окно.

В jQuery нет функции для постоянного определения правильной ширины и высоты windows просмотра [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(); 

Мой ответ, вероятно, не поможет resize iframe на 100% ширину видового экрана с пометкой на каждой стороне, но я надеюсь, что это обеспечит утешение для веб-разработчиков, разочарованных несовместимостью просмотра ширины и высоты windows просмотра javascript.

Возможно, это может помочь в отношении iframe:

 $('iframe').css('width', '100%').wrap('
');

[1] Вы можете использовать $ (window) .width () и $ (window) .height (), чтобы получить число, которое будет правильным в некоторых браузерах, но неверно в других. В этих браузерах вы можете попытаться использовать window.innerWidth и window.innerHeight, чтобы получить правильную ширину и высоту, но я бы советовал против этого метода, потому что он полагался бы на нюхание агента пользователя.

Обычно разные браузеры непоследовательны относительно того, include ли полосу прокрутки в качестве части ширины и высоты windows.

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

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

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

 function getViewport() { var viewportWidth = $(window).width(); var viewportHeight = $(window).height(); $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px'); } getViewport(); $(window).resize(function() { getViewport() }); 
 function showViewPortSize(display) { if (display) { var height = window.innerHeight; var width = window.innerWidth; jQuery('body') .prepend('
Height: ' + height + '
Width: ' + width + '
'); jQuery(window) .resize(function() { height = window.innerHeight; width = window.innerWidth; jQuery('#viewportsize') .html('Height: ' + height + '
Width: ' + width); }); } } $(document) .ready(function() { showViewPortSize(true); });

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

  screen.availWidth or screen.availHeight 
  • Масштабируйте ImageIcon автоматически до размера метки
  • В чем разница между Width и ActualWidth в WPF?
  • Установить ширину столбца переменной текста в printf
  • Как получить размер объекта JavaScript?
  • Можете ли вы resize массива C ++ после инициализации?
  • Ограничение размера курсора в Android SQLiteDatabase
  • Как resize шрифта JLabel, чтобы взять максимальный размер
  • C # «Параметр недействителен». Создание нового растрового изображения
  • Что делает звезда WPF (Width = "100 *")
  • В C, почему sizeof (char) 1, когда 'a' является int?
  • Interesting Posts

    Игнорировать знак процента в пакетном файле

    Как установить беспроводные драйверы без доступа в Интернет?

    Используйте Unity API из другого streamа или вызовите функцию в главной теме

    Вызывает ли std :: list :: remove метод деструктор вызова каждого удаленного элемента?

    Как использовать ракушку в cygwin?

    Как написать пользовательский десериализатор JSON для Gson?

    Удаление Notepad ++ Путь к заголовку

    Xcode 4 не может найти общедоступные файлы заголовков из зависимости статической библиотеки

    Отображение изображений из определенной папки на SD-карте с использованием gridview

    Java 8 U40 TextFormatter (JavaFX) для ограничения ввода пользователя только для десятичного числа

    Блокировать доступ к Центру обновления Windows

    Что означает селектор CSS>> (больше, чем знак)?

    Вставить несколько столбцов вместе

    Как заставить клавиатуру вводить японский язык?

    Как установить Internet Explorer в Linux?

    Давайте будем гением компьютера.