Как мне использовать jQuery, чтобы определить размер окна просмотра браузера и переопределить его, если размер страницы изменился? Мне нужно внести размер IFRAME в это пространство (немного по каждому полю).
Для тех, кто не знает, окно просмотра браузера не является размером документа / страницы. Это видимый размер вашего окна перед прокруткой.
Ответы:
Чтобы получить ширину и высоту области просмотра:
изменить размер события страницы:
источник
innerWidth
/innerHeight
правильнее использовать (покрывая масштабирование).DOCTYPE
объявление, например<!DOCTYPE html>
.Вы можете попробовать единицы просмотра (CSS3):
Поддержка браузера
источник
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 () {});РЕДАКТИРОВАТЬ: о части 2, «ДОПОЛНИТЕЛЬНАЯ подсказка, обратите внимание»: @Machiel во вчерашнем комментарии (2014-09-04) был совершенно прав: проверка $ не может быть внутри события ready Jquery, потому что мы, как он указал, предполагаем, что $ уже определено. СПАСИБО, ЧТОБЫ УКАЗАТЬ ЭТО, и, пожалуйста, остальным читателям исправьте это, если вы использовали это в своих сценариях. Мое предложение: в ваших библиотеках поместите функцию "install_script ()", которая инициализирует библиотеку (поместите любую ссылку на $ внутри такой функции init, включая объявление ready ()) и в НАЧАЛЕ такой функции "install_script ()" проверьте, определен ли $, но сделайте все независимым от JQuery, чтобы ваша библиотека могла «диагностировать себя», когда JQuery еще не определен. Я предпочитаю этот метод, а не принудительное автоматическое создание JQuery с использованием CDN. Это крошечные заметки для помощи другим программистам. Я думаю, что люди, которые делают библиотеки, должны быть более внимательны к ошибкам потенциальных программистов. Например, Google Apis необходимо дополнительное руководство для понимания сообщений об ошибках. Это абсурдно, требовать внешнюю документацию для некоторых крошечных ошибок, которые не требуют, чтобы вы пошли искать руководство или спецификацию. Библиотека должна быть САМОДОКУМЕНТИРОВАНА. Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и неповторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика. Я думаю, что люди, которые делают библиотеки, должны быть более внимательны к ошибкам потенциальных программистов. Например, Google Apis необходимо дополнительное руководство для понимания сообщений об ошибках. Это абсурдно, требовать внешнюю документацию для некоторых крошечных ошибок, которые не требуют, чтобы вы пошли искать руководство или спецификацию. Библиотека должна быть САМОДОКУМЕНТИРОВАНА. Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и неповторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика. Я думаю, что люди, которые делают библиотеки, должны быть более внимательны к ошибкам потенциальных программистов. Например, Google Apis необходимо дополнительное руководство для понимания сообщений об ошибках. Это абсурдно, требовать внешнюю документацию для некоторых крошечных ошибок, которые не требуют, чтобы вы пошли искать руководство или спецификацию. Библиотека должна быть САМОДОКУМЕНТИРОВАНА. Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и неповторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика. Тебе не нужно идти искать руководство или спецификацию. Библиотека должна быть САМОДОКУМЕНТИРОВАНА. Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и неповторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика. Тебе не нужно идти искать руководство или спецификацию. Библиотека должна быть САМОДОКУМЕНТИРОВАНА. Я пишу код, даже заботясь об ошибках, которые могу совершить даже через шесть месяцев, и он все еще пытается быть чистым и неповторяющимся кодом, уже написанным для предотвращения ошибок будущего разработчика.
источник
$
после того, как уже использовали$
для вызова$(document).ready(function() { } );
. Хорошо, если вы проверите, доступен ли jQuery, но сейчас уже слишком поздно.Вы можете использовать $ (window) .resize (), чтобы определить, изменяется ли размер области просмотра.
jQuery не имеет никакой функции для последовательного определения правильной ширины и высоты области просмотра [1] при наличии полосы прокрутки.
Я нашел решение, которое использует библиотеку Modernizr и, в частности, функцию mq, которая открывает медиа-запросы для javascript.
Вот мое решение:
Мой ответ, вероятно, не поможет изменить размер iframe до 100% ширины области просмотра с полями с каждой стороны, но я надеюсь, что он обеспечит утешение для веб-разработчиков, разочарованных несогласованностью браузером вычисления ширины и высоты области просмотра javascript.
Может быть, это может помочь в отношении iframe:
[1] Вы можете использовать $ (window) .width () и $ (window) .height (), чтобы получить число, которое будет правильным в некоторых браузерах, но неверным в других. В этих браузерах вы можете попытаться использовать window.innerWidth и window.innerHeight, чтобы получить правильную ширину и высоту, но я бы посоветовал против этого метода, потому что он будет полагаться на сниффинг пользовательского агента.
Обычно разные браузеры не согласуются с тем, включают ли они полосу прокрутки как часть ширины и высоты окна.
Примечание. И $ (window) .width (), и window.innerWidth различаются в разных операционных системах, использующих один и тот же браузер. См .: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238.
источник
источник
Чтобы получить размер области просмотра при загрузке и при изменении размера (на основе ответа SimaWB):
источник
Обратите внимание, что CSS3 единицы просмотра (vh, vw) не будут хорошо работать на iOS. Когда вы прокручиваете страницу, размер окна просмотра каким-то образом пересчитывается, и ваш размер элемента, который использует единицы просмотра, также увеличивается. Таким образом, на самом деле требуется некоторый JavaScript.
источник