Как использовать jQuery для определения размера окна просмотра обозревателя и повторного его отображения, если страница изменена? Мне нужно сделать размер IFRAME в этом пространстве (немного на каждой границе).
Для тех, кто не знает, окно просмотра браузера не является размером документа/страницы. Это видимый размер вашего окна перед прокруткой.
Чтобы получить ширину и высоту окна просмотра:
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
изменить размер страницы:
$(window).resize(function() {
});
Вы можете попробовать единицы просмотрa > (CSS3):
div {
height: 95vh;
width: 95vw;
}
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 нуждается в справочном руководстве для понимания сообщений об ошибках. Это абсурдно, нужна внешняя документация для некоторых крошечных ошибок, которые вам не нужны, чтобы искать и искать руководство или спецификацию. Библиотека должна быть САМОУПРАВЛЕННОЙ. Я пишу код, даже заботясь о тех ошибках, которые я мог бы совершить, даже через шесть месяцев, и он по-прежнему пытается быть чистым и не повторяющимся кодом, уже написанным для предотвращения будущих ошибок разработчика.
Вы можете использовать $(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
Обратите внимание, что узлы просмотра CSS3 (vh, vw) не будут хорошо воспроизводиться на iOS. При прокрутке страницы размер видового экрана каким-то образом пересчитывается, и ваш размер элемента, который использует единицы просмотра, также увеличивается. Таким образом, на самом деле требуется некоторый javascript.
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);
});
Чтобы получить размер области просмотра на нагрузка и на изменить размер (на основе ответа SimaWB):
function getViewport() {
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
$('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}
getViewport();
$(window).resize(function() {
getViewport()
});
Для мобильных устройств используйте:
screen.availWidth or screen.availHeight