Використання jQuery для отримання розміру вікна перегляду

308

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

Для тих, хто не знає, вікно перегляду браузера - це не розмір документа / сторінки. Це видимий розмір вашого вікна перед прокруткою.

— Воломіке
джерело

Будь-яка ідея, як отримати область, видиму на екрані пристроїв, а не лише те, до чого вона може прокручуватися? Я бачу $ (window) .height (), що повертає повну ширину документа, а не ту частину, на яку збільшується. Хочеться знати, скільки видно після застосування масштабу.

— Френк Швітерман

appelsiini.net/projects/viewport Це слід зробити! :)

— Маккеліто

1

Це не є прямою відповіддю на питання, але може бути корисним для тих, хто хоче маніпулювати селекторами відповідно до їх положення та видимості стосовно вікна перегляду: appelsiini.net/projects/viewport (плагін)

— Wallace Sidhrée

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, саме там мені знадобилося це для роботи.

— Воломіке

48

Будь-яка ідея, як отримати область, видиму на екрані пристроїв, а не лише те, до чого вона може прокручуватися? Я бачу $ (window) .height (), що повертає повну ширину документа, а не ту частину, на яку збільшується. Хочеться знати, скільки видно після застосування масштабу.

— Френк Швітерман

9

Насправді, innerWidth/ innerHeightправильніше використовувати (покриття масштабування).

18

@FrankSchwieterman Можливо, ваш браузер поводиться не так, як ви цього хочете: можливо, ви зіткнулися з цією проблемою: stackoverflow.com/q/12103208/923560 . Переконайтеся, що ваш HTML-файл містить належну DOCTYPEдекларацію, наприклад <!DOCTYPE html>.

— Абдул

21

Це абсолютно неправильно. Це дає вам розмір документа, а не вікно перегляду (розмір вікна на документ).

— Майк Бетхані

39

Ви можете спробувати одиниці перегляду (CSS3):

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

Підтримка браузера

— Віталій Федоренко
джерело

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 це вирішено задовільно, і я впевнений, що ви, пепси, уникнете "зміни переливу прокрутки на прихований, а потім назад", що, пробачте, трохи брудний трюк, особливо якщо ви не хочете " t задокументуйте його на код для використання майбутнім програмістом.

2. ДОПОМОГА порада, зверніть увагу: Більше того, якщо ви робите сценарій, ви можете придумати тести, щоб допомогти програмістам у використанні ваших бібліотек, дозвольте мені придумати пару:

~~$ (документ) .ready (функція () {~~

      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, включаючи декларацію про готовність ()) та НА ПОЧАТКУ такої функції "install_script ()" , перевірте, чи визначено $, але зробіть все незалежним від JQuery, щоб ваша бібліотека могла "діагностувати себе", коли JQuery ще не визначений. Я вважаю за краще цей метод, а не змушувати автоматичне створення JQuery, що приносить його з CDN. Це крихітні записки в сторону допомоги інших програмістів. Я думаю, що люди, які створюють бібліотеки, повинні бути багатшими відгуками на помилки потенційних програмістів. Наприклад, Google Apis потрібен посібник убік, щоб зрозуміти повідомлення про помилки. Це абсурд, вам потрібна зовнішня документація для деяких крихітних помилок, які не потребують вас шукати посібник чи технічні характеристики. Бібліотека повинна бути самодокументована. Я пишу код, навіть беручи до уваги помилки, які я можу допустити навіть через півроку, і він все ще намагається бути чистим і не повторюваним кодом, уже написаним для запобігання майбутнім помилкам розробника. Я думаю, що люди, які створюють бібліотеки, повинні бути багатшими відгуками на помилки потенційних програмістів. Наприклад, Google Apis потрібен посібник убік, щоб зрозуміти повідомлення про помилки. Це абсурд, вам потрібна зовнішня документація для деяких крихітних помилок, які не потребують вас шукати посібник чи технічні характеристики. Бібліотека повинна бути самодокументована. Я пишу код, навіть беручи до уваги помилки, які я можу допустити навіть через півроку, і він все ще намагається бути чистим і не повторюваним кодом, уже написаним для запобігання майбутнім помилкам розробника. Я думаю, що люди, які створюють бібліотеки, повинні бути багатшими відгуками на помилки потенційних програмістів. Наприклад, Google Apis потрібен посібник убік, щоб зрозуміти повідомлення про помилки. Це абсурд, вам потрібна зовнішня документація для деяких крихітних помилок, які не потребують вас шукати посібник чи технічні характеристики. Бібліотека повинна бути самодокументована. Я пишу код, навіть беручи до уваги помилки, які я можу допустити навіть через півроку, і він все ще намагається бути чистим і не повторюваним кодом, уже написаним для запобігання майбутнім помилкам розробника. не потрібно, щоб ви шукали посібник чи специфікацію. Бібліотека повинна бути самодокументована. Я пишу код, навіть беручи до уваги помилки, які я можу допустити навіть через півроку, і він все ще намагається бути чистим і не повторюваним кодом, уже написаним для запобігання майбутнім помилкам розробника. не потрібно, щоб ви шукали посібник чи специфікацію. Бібліотека повинна бути самодокументована. Я пишу код, навіть беручи до уваги помилки, які я можу допустити навіть через півроку, і він все ще намагається бути чистим і не повторюваним кодом, уже написаним для запобігання майбутнім помилкам розробника.

— Девід Л
джерело

2

Дуже важко читати свій пост. Будь ласка, повторіть свою публікацію, щоб ви звикли до StackExchange Markdown, як і всі. Існує причина, чому сайти StackExchange не використовують TinyMCE , але якщо ви з цим стикаєтесь, вступайте в мета .

— Воломіке

Трохи дивно, що ви перевіряєте наявність $після того, як ви вже використовували $дзвінок $(document).ready(function() { } );. Добре, якщо ви перевірите, чи доступний jQuery, але в цей момент вже пізно.

— Махіель

@Machiel, ти ВІДПРАВНО ПРАВО. На щастя, я просто пішов перевірити свої сценарії, і вони не використовують готовий захід. Так, дякую, я почувався дурним, коли ти це сказав, але, на щастя, я просто перевірив, що в моїх сценаріях перевірка знаходиться всередині функції під назвою "install_this_script ()", і при такій установці я викликаю функцію init бібліотеки, але перед цим я перевіряю (OUTSIDE 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/isissue/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);
    });

— АнуРай
джерело

Використання $ (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.

— DAH
джерело