[JS] Wykrywanie typów wyświetlaczy a’la @media-query w CSS3

Ostatnio bardzo dużo się mówi i pisze o tym, jakie to @media-queries w CSS3 są super pożyteczne. Nie zaprzeczam, są bardzo użyteczne w kontekście tworzenia wyglądu stron WWW przygotowanych pod urządzenia mobilne posiadających zdecydowanie mniejsze ekrany niż standardowy monitor komputerowy.

Co ciekawe, mechanizmy które są wykorzystywane do wykrywania typów wyświetlaczy w urządzeniach mobilnych są dostępne również z poziomu JavaScript. To pozwoli nam na dowolne sterowanie aplikacją lub zasobami aplikacji zależnie od typu urządzenia na którym strona lub aplikacja internetowa zostały odpalone.
W tym artykule skupię się na ładowaniu odpowiednich plików JS zależnie od urządzenia na którym wykonany przez Ciebie projekt został wyświetlony.

Sekcja 1CSS3 @media-queries - trochę teorii

W momencie, gdy wprowadzono @media-queries w CSS3, to zmieniło się życie wielu webdeveloperów. Od tamtej pory można właściwie z bez problemów tworzyć szablony stron, które potrafią się dopasowywać do rozdzielczości ekranów, niezależnie od tego czy użytkownik korzysta z monitora, tabletu czy smartfona.

@media-queries w CSS3 wyglądają następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

/* --- SMARTFONY Z EKRANAMI O ROZDZIELCZOSCI 320-480px --- */
@media only screen  and (min-device-width : 320px) and (max-device-width : 480px) {
    body { background: #b30; }
}
 
/* --- SMARTFONY Z EKRANAMI O ROZDZIELCZOSCI 480-800px --- */
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) {
    body { background: #333; }
}
 
/* --- TABLETY --- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
    body { background: #f3f3f3; }
}
 
/* --- DUŻE EKRANY --- */
@media only screen and (min-device-width : 1024px) and (max-device-width : 1920px) {
    body { background: #7f0c7f; }
}

Wymienione powyżej przykłady można wykorzystać do ogólnego wykrywania rozdzielczości ekranu urządzenia. Nic nie stoi na przeszkodzie, aby je o wiele bardziej uszczegółowić dodając wsparcie dla specyficznych ekranów, np. Retina, czy też odpowiedniej orientacji urządzenia (poziomo lub pionowo) i wiele innych możliwości. Więcej można znaleźć pod tym linkiem.

Sekcja 2@media-queries w JS

Pora na wykrywanie rozdzielczości ekranu za pomocą JavaScriptu. Aby tego dokonać, wykorzystamy następujący kod JS:

1
2
3
4
5
6
7
8
9
10
11

$(function() {
    if (window.matchMedia("(min-device-width: 1024px)").matches) {
        $.getScript('/js/scripts.js', function() {
            $('body').on('hover', function() {
                $(this).funkcjaPlikScripts();
            });
        });
    } else {
        window.alert('Nie załadowano skryptu');
    }
});

Najpierw sprawdziliśmy czy minimalna rozdzielczość urządzenia wynosi 1024px. Jeśli spełnia to wymaganie, to załadowano plik JSw którym była funkcjaPlikScripts().

Sekcja 3Podsumowanie

Do tej pory, jeśli mówiono o RWD (Responsive WebDesign), to mówiono o nim w kontekście tworzenia szablonów z wykorzystaniem CSS3 i @media-queries. Teraz można o tym mówić również w kontekście ładowania dodatkowych plików JS zawierających funkcje, pluginy lub inne biblioteki JS potrzebne na stronie w danym momencie. To pozwoli na zmiejszenie wagi strony mobilnej, przez co strona na urządzenia mobilne będzie się ładowała szybciej bez potrzeby pobierania dodatkowych plików JS, które mogłbyby być nie wykorzystywane w danej wersji strony.

Wpis został zainspirowany przez Daro. Pozdrowienia dla niego 🙂
źródło