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

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

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

Для переходного HTML4:

Вероятно, тип 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 
  • Как получить общий объем оперативной памяти устройства?
  • Получение размера терминала в c для окон?
  • Сколько данных может содержать список максимум?
  • Почему размер моего приложения на устройстве отличается от размера APK или Play Store
  • Разница между опциями передачи в aes () и за ее пределами в ggplot2
  • Определите размер слова моего процессора
  • Как получить размер объекта JavaScript?
  • В чем разница между Width и ActualWidth в WPF?
  • Есть ли причина не использовать целые типы фиксированной ширины (например, uint8_t)?
  • Как я могу получить размер файла в C?
  • где найти значение XSS по умолчанию для Sun / Oracle JVM?
  • Interesting Posts

    Сценарий запуска Linux для подключения к bluetooth и cron, чтобы поддерживать связь

    Как закрыть приложение OS X из командной строки с помощью псевдонима, определенного в моем .bash_profile?

    Какие функции следует искать в ноутбуке для больших рабочих нагрузок виртуализации?

    Поддержка браузера для CSS-сетки

    AngularJS ui маршрутизатор, передающий данные между состояниями без URL

    Как заставить ASP.NET Web API возвращать JSON вместо XML с помощью Chrome?

    Как отключить / сбросить пароль при включении на ноутбуке Toshiba Satellite C55DT-A5106

    как я могу обнаружить клавиши со стрелками в java-консоли, а не в графическом интерфейсе?

    Как вы пишете формулу Excel, которая вставляет определенное значение в другую ячейку?

    Как Robocopy определяет, «файл изменен»,

    Является ли внешний жесткий диск с металлическим чеканкой лучше для рассеивания тепла, чем пластиковый?

    Владение жестким диском не раскрывает файлы

    Как извлечь 7z zip и иметь правильную структуру директории?

    AngularJS: $ viewContentLoaded, выпущенный до частичного просмотра

    Как сделать естественный вид на NSArray?

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