Korzystanie z jQuery w celu uzyskania rozmiaru rzutni

308

Jak użyć jQuery do określenia rozmiaru okienka przeglądarki i do ponownego wykrycia tego, jeśli rozmiar strony się zmieni? Muszę zrobić rozmiar IFRAME w tej przestrzeni (pojawi się trochę na każdym marginesie).

Dla tych, którzy nie wiedzą, rzutnia przeglądarki nie ma rozmiaru dokumentu / strony. Jest to widoczny rozmiar twojego okna przed przewijaniem.

jquery resize size viewport Volomike
źródło
Masz pomysł, jak uzyskać obszar widoczny na ekranie urządzeń, a nie tylko to, do czego można przewijać? Widzę $ (okno) .height () zwracające pełną szerokość dokumentu, a nie część, która jest powiększona. Chcę wiedzieć, ile widać po zastosowaniu zoomu.
Frank Schwieterman,
appelsiini.net/projects/viewport To powinno wystarczyć! :)
Mackelito,
1
To nie jest bezpośrednia odpowiedź na pytanie, ale może być przydatna dla tych, którzy chcą manipulować selektorami zgodnie z ich pozycją i widocznością w stosunku do widoku: appelsiini.net/projects/viewport (plugin)
Wallace Sidhrée

Odpowiedzi:

484

Aby uzyskać szerokość i wysokość rzutni:

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

zmień rozmiar zdarzenia strony:

$(window).resize(function() {

});
SimaWB
źródło
18
Przetestowałem to na Windows IE6, IE8, FF3.6.3, Google Chrome 5.0.375.70, Opera 10.53 i Safari 5.0 (7533.16). Działa to konsekwentnie na wszystkie z nich. Testowałem również FF3.6.3 na Ubuntu i tam też działa. Myślę, że używam jQuery 1.3 z WordPress 2.9.2, i tam właśnie potrzebowałem tego do pracy.
Volomike
48
Masz pomysł, jak uzyskać obszar widoczny na ekranie urządzeń, a nie tylko to, do czego można przewijać? Widzę $ (okno) .height () zwracające pełną szerokość dokumentu, a nie część, która jest powiększona. Chcę wiedzieć, ile widać po zastosowaniu zoomu.
Frank Schwieterman,
9
W rzeczywistości, innerWidth/ innerHeightjest bardziej poprawny w użyciu (obejmujący powiększanie).
18
@FrankSchwieterman Być może Twoja przeglądarka nie zachowuje się tak, jak tego chcesz: może napotykasz ten problem: stackoverflow.com/q/12103208/923560 . Upewnij się, że plik HTML zawiera odpowiednią DOCTYPEdeklarację, np <!DOCTYPE html>.
Abdull,
21
To jest całkowicie błędne. Daje to rozmiar dokumentu, a nie rzutni (rozmiar okna na dokumencie).
Mike Bethany
26

1. Odpowiedź na główne pytanie

Skrypt $(window).height()działa dobrze (pokazuje wysokość rzutni, a nie dokument z przewijaną wysokością), ALE musi poprawnie wstawić znacznik doctype w dokumencie, na przykład następujące typy dokumentów:

W przypadku HTML 5:

<!DOCTYPE html>

W przypadku przejściowego HTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Prawdopodobnie domyślny typ dokumentu przyjęty przez niektóre przeglądarki jest taki, że $(window).height()przyjmuje wysokość dokumentu, a nie wysokość przeglądarki. Dzięki specyfikacji doctype jest zadowalająco rozwiązany i jestem prawie pewien, że pieprzysz uniknie „zmiany przepełnienia przewijania na ukryte, a potem z powrotem”, co jest, przykro mi, trochę brudną sztuczką, szczególnie jeśli nie udokumentować na kodzie do wykorzystania w przyszłości przez programistę.

2. DODATKOWA wskazówka, uwaga na bok: Co więcej, jeśli wykonujesz skrypt, możesz wynaleźć testy, które pomogą programistom w korzystaniu z bibliotek, pozwól mi wynaleźć kilka:

$ (dokument) .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");
      }

});

EDYCJA: o części 2, „DODATKOWA wskazówka, odłóż na bok”: @Machiel, we wczorajszym komentarzu (2014-09-04), miał absolutnie rację: sprawdzenie $ nie może być w gotowym wydarzeniu Jquery, ponieważ jak zauważył, zakładamy, że $ jest już zdefiniowane. DZIĘKUJEMY ZA PUNKTOWANIE, ŻE, i proszę, resztę czytelnicy poprawcie, jeśli użyliście tego w swoich skryptach. Moja sugestia: w bibliotekach umieść funkcję „install_script ()”, która inicjuje bibliotekę (umieść dowolne odwołanie do $ wewnątrz takiej funkcji init, w tym deklarację ready ()) i NA POCZĄTKU takiej funkcji „install_script ()” , sprawdź, czy $ jest zdefiniowane, ale uniezależnij wszystko od JQuery, aby twoja biblioteka mogła „zdiagnozować się”, gdy JQuery nie jest jeszcze zdefiniowane. Wolę tę metodę niż wymuszanie automatycznego tworzenia JQuery przynoszącego ją z CDN. Są to małe notatki, które pomagają innym programistom. Myślę, że osoby tworzące biblioteki muszą być bogatsze w informacje zwrotne na temat potencjalnych błędów programisty. Na przykład Google Apis potrzebuje podręcznika, aby zrozumieć komunikaty o błędach. To absurdalne, że potrzebna jest zewnętrzna dokumentacja dotycząca drobnych błędów, które nie wymagają od ciebie szukania instrukcji lub specyfikacji. Biblioteka musi być DOKUMENTOWANA. Piszę kod nawet dbając o błędy, które mógłbym popełnić nawet za sześć miesięcy, i nadal stara się być czystym i nie powtarzalnym kodem, już napisanym, aby zapobiec błędom przyszłego programisty. Myślę, że osoby tworzące biblioteki muszą być bogatsze w informacje zwrotne na temat potencjalnych błędów programisty. Na przykład Google Apis potrzebuje podręcznika, aby zrozumieć komunikaty o błędach. To absurdalne, że potrzebna jest zewnętrzna dokumentacja dotycząca drobnych błędów, które nie wymagają od ciebie szukania instrukcji lub specyfikacji. Biblioteka musi być DOKUMENTOWANA. Piszę kod nawet dbając o błędy, które mógłbym popełnić nawet za sześć miesięcy, i nadal stara się być czystym i nie powtarzalnym kodem, już napisanym, aby zapobiec błędom przyszłego programisty. Myślę, że osoby tworzące biblioteki muszą być bogatsze w informacje zwrotne na temat potencjalnych błędów programisty. Na przykład Google Apis potrzebuje podręcznika, aby zrozumieć komunikaty o błędach. To absurdalne, że potrzebna jest zewnętrzna dokumentacja dotycząca drobnych błędów, które nie wymagają od ciebie szukania instrukcji lub specyfikacji. Biblioteka musi być DOKUMENTOWANA. Piszę kod nawet dbając o błędy, które mógłbym popełnić nawet za sześć miesięcy, i nadal stara się być czystym i nie powtarzalnym kodem, już napisanym, aby zapobiec błędom przyszłego programisty. musisz przejść do instrukcji obsługi lub specyfikacji. Biblioteka musi być DOKUMENTOWANA. Piszę kod nawet dbając o błędy, które mógłbym popełnić nawet za sześć miesięcy, i nadal stara się być czystym i nie powtarzalnym kodem, już napisanym, aby zapobiec błędom przyszłego programisty. musisz przejść do instrukcji obsługi lub specyfikacji. Biblioteka musi być DOKUMENTOWANA. Piszę kod nawet dbając o błędy, które mógłbym popełnić nawet za sześć miesięcy, i nadal stara się być czystym i nie powtarzalnym kodem, już napisanym, aby zapobiec błędom przyszłego programisty.

David L.
źródło
2
Bardzo trudno jest przeczytać Twój post. Ponownie wprowadź swój post, aby przyzwyczaić się do StackExchange Markdown, jak wszyscy inni. Istnieje powód, dla którego strony StackExchange nie używają TinyMCE , ale jeśli masz na to ochotę, włącz się w Meta .
Volomike
To trochę dziwne, że sprawdzasz dostępność $po tym, jak już używałeś $połączenia $(document).ready(function() { } );. Dobrze jest sprawdzić, czy jQuery jest dostępne, ale w tym momencie jest już za późno.
Machiel
@Machiel, jesteś PRAWIDŁOWY. Na szczęście po prostu poszedłem sprawdzić moje skrypty i nie używają gotowego zdarzenia. Tak, dziękuję, czułem się głupio, kiedy to powiedziałeś, ale na szczęście właśnie sprawdziłem, że w moich skryptach sprawdzanie jest wewnątrz funkcji o nazwie „install_this_script ()”, aw takiej instalacji wywołuję funkcję init biblioteki, ale przed tym sprawdzam (ZEWNĘTRZNA JQUERY), czy obiekt $ jest zdefiniowany, czy nie. DZIĘKUJEMY W KAŻDYM, bracie, naprawdę mnie przeraziłeś! Obawiam się, że ten post był tu zbyt długo, mam nadzieję, że ten błąd nie wyrządził wiele szkody innym czytelnikom. Poprawiłem post.
David L
To powinna być prawdziwa odpowiedź! Dzięki!
Justin T. Watts
6

Możesz użyć $ (okno) .resize (), aby sprawdzić, czy rozmiar rzutni jest zmieniony.

jQuery nie ma żadnej funkcji do spójnego wykrywania prawidłowej szerokości i wysokości rzutni [1], gdy obecny jest pasek przewijania.

Znalazłem rozwiązanie, które korzysta z biblioteki Modernizr, a konkretnie z funkcji mq, która otwiera zapytania o media dla javascript.

Oto moje rozwiązanie:

// 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();

Moja odpowiedź prawdopodobnie nie pomoże zmienić rozmiaru ramki iframe do 100% szerokości rzutni z marginesem po każdej stronie, ale mam nadzieję, że zapewni ukojenie programistom internetowym sfrustrowanym niespójnością przeglądarki w zakresie obliczania szerokości i wysokości rzutni javascript.

Może to może pomóc w odniesieniu do iframe:

$('iframe').css('width', '100%').wrap('<div style="margin:2em"></div>');

[1] Możesz użyć $ (okno) .width () i $ (okno) .height (), aby uzyskać liczbę, która będzie poprawna w niektórych przeglądarkach, ale w innych będzie niepoprawna. W tych przeglądarkach możesz spróbować użyć window.innerWidth i window.innerHeight, aby uzyskać prawidłową szerokość i wysokość, ale odradzałbym tę metodę, ponieważ polegałaby na wąchaniu agenta użytkownika.

Zwykle różne przeglądarki nie są zgodne co do tego, czy zawierają pasek przewijania jako część szerokości i wysokości okna.

Uwaga: Zarówno $ (okno) .width (), jak i window.innerWidth różnią się w zależności od systemu operacyjnego używającego tej samej przeglądarki. Zobacz: https://github.com/eddiemachado/bones/issues/468#issuecomment-23626238

forsvunnet
źródło
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);
    });
AnuRaj
źródło
Użycie $ (window) .height () nie da ci rozmiaru rzutni, da ci rozmiar całego okna, który zwykle jest rozmiarem całego dokumentu, chociaż dokument może być jeszcze większy.
AnuRaj,
idealne dla szerokości!
Marc
2

Aby uzyskać rozmiar rzutni przy obciążeniu i przy zmianie rozmiaru (na podstawie odpowiedzi SimaWB):

function getViewport() {
    var viewportWidth = $(window).width();
    var viewportHeight = $(window).height();
    $('#viewport').html('Viewport: '+viewportWidth+' x '+viewportHeight+' px');
}

getViewport();

$(window).resize(function() {
    getViewport()
});
SandroMarques
źródło
1

Pamiętaj, że jednostki rzutni CSS3 (vh, vw) nie działałyby dobrze w iOS. Kiedy przewijasz stronę, rozmiar rzutni jest w jakiś sposób ponownie obliczany, a rozmiar elementu, który korzysta z jednostek rzutni, również się zwiększa. Tak więc w rzeczywistości wymagany jest javascript.

DAH
źródło