Loading
Memtor Marketing

Użycie Media Queries na stronie dla użytkowników mobilnych

image title

rwdKiedy powstał Internet, był on przeglądany niemal wyłącznie na komputerach stacjonarnych. Zdecydowana większość użytkowników posiadała standardowe rozdzielczości monitorów, w związku z tym strony były tworzone w odpowiednich do nich szerokościach. Na początku XXI wieku niemal 90% internautów posiadało monitor z jedną z dwóch szerokości: 800 lub 1024 pikseli. Webmasterzy tworzyli więc strony najczęściej w szerokości 600 lub 680 pikseli, żeby poprawnie wyglądała u większości użytkowników. Z czasem powstawały coraz większe monitory, ale wciąż w jednakowych standardach, przez co jeszcze 5 lat temu niemal 90% internautów korzystało z szerokości 1024 lub 1280 pikseli. Biorąc pod uwagę wzrost liczby większych monitorów, webmasterzy przerabiali swoje strony na większe szerokości, ale najczęściej było to 960 pikseli – taka strona poprawnie wyglądała u niemal wszystkich. Wszystko zaczęło się zmieniać w 2008 roku wraz ze wzrostem popularności laptopów oraz monitorów do komputerów stacjonarnych większych niż 19''. Od tamtej pory szerokości wyświetlaczy znacznie się zróżnicowały, a ilość dwóch standardowych szerokości regularnie co roku maleje. W ubiegłym roku obejmowała zaledwie poniżej połowy internautów, a drugie tyle posiadało monitory szersze, na których strona o szerokości 960 pikseli posiadała dużo wolnego, niewykorzystanego miejsca po bokach. Z drugiej strony coraz większa popularność tabletów oraz smartfonów spowodowała kilkuprocentowy udział wyświetlaczy o szerokości mniejszej niż 1000 pikseli, na których standardowe strony były za szerokie. W tym roku udział ten będzie z pewnością większy, w związku z czym webmasterzy muszą przerabiać swoje strony na kilka rodzajów szerokości. Dotychczas najczęściej stosowanym sposobem na to było tworzenie drugiej strony dla użytkowników mobilnych przeglądarek, jednak powoduje to problemy z wdrożeniem oraz rozwojem dwóch różnych wersji, a także z różnymi wielkościami urządzeń mobilnych. Na szczęście pojawiło się lepsze rozwiązanie: Media Queries.

Za pomocą Media Queries można było wczytać różne style CSS zależnie od rodzaju urządzenia: komputer, projektor, urządzenie przenośne, drukarka, urządzenie do czytania braillem i inne. To rozwiązywało poniekąd problem witryn dla użytkowników mobilnych, ale w obecnych czasach tablety mogą mieć rozdzielczość taką jak stacjonarny komputer, więc otrzymując treść przeznaczoną dla komórek, były poszkodowane. Dlatego CSS3 wprowadził nowe możliwości w Media Queries, m.in. możliwość wczytania różnych stylów zależnie od szerokości przeglądarki, orientacji ekranu (poziomej lub pionowej – przydatne dla tabletów), obsługiwanej ilości kolorów oraz rozdzielczości DPI (to z kolei pomaga stworzyć odpowiedni styl dla nowoczesnych wyświetlaczy z gęstszym upakowaniem pikseli, np. Retina). Sposób ten nosi nazwę Responsive Web Design. Ogólnie chodzi o to, żeby szerokość strony dopasowywała się do wielkości urządzenia użytkownika i dla żadnego rozmiaru nie był potrzebny poziomy pasek przewijania.

W jaki sposób skorzystać z CSS3 Media Queries, żeby strona wyglądała poprawnie na każdej rozdzielczości? Przede wszystkim najlepiej witrynę zbudować w oparciu o prostokątne elementy główne, np.:

uklad-1280

Można wtedy w łatwy sposób manipulować ich ustawieniem oraz wielkościami, w zależności od tego, jaką szerokość całkowitą chcemy osiągnąć. Główny plik CSS można przygotować na szerokość 960 pikseli, tak jak do tej pory było standardowo. Następnie należy dopisać reguły dla niestandardowych rozdzielczości: na dole tego samego pliku lub w oddzielnym pliku CSS, który można zaimportować w głównym lub w nagłówku samej strony. Możliwości zmian układu jest wiele, wszystko zależy od samego układu, ale dobrze zrobić jeden dodatkowy układ dla urządzeń od 700 do 1000 pikseli szerokości i jeden dodatkowy dla urządzeń od 320 pikseli szerokości wzwyż, mimo że tych ostatnich niewiele osób używa do przeglądania Internetu. Dodatkowym atutem będzie zestaw reguł dla większych monitorów, np. powyżej 1280 pikseli szerokości. Poniżej przykładowe rozwiązania dla tych trzech układów:

uklad-700 uklad-700b uklad-480uklad-1360

 

 

Jak tego dokonać w CSS-ie? Wystarczy odpowiednie reguły zamieścić w zapytaniu media:

@media screen and (width: 700px) { /* deklaracje css */ }

Zamiast screen można użyć:

  • all – wszystkie urządzenia;
  • braille – urządzenia używające języka Braille'a;
  • embossed – drukarki języka Braille'a;
  • handheld – urządzenia przenośne;
  • print – drukarki;
  • projection – projektory;
  • screen – monitory komputerów;
  • tty – wyświetlacze ze znakami jednakowej szerokości;
  • tv – telewizory.

Zamiast width można użyć:

  • width, min-width, max-width – szerokość używana przez przeglądarkę;
  • height, min-height, max-height – wysokość używana przez przeglądarkę;
  • device-width, min-device-width, max-device-width – faktyczna szerokość wyświetlacza;
  • device-height, min-device-height, max-device-height – faktyczna wysokość wyświetlacza;
  • orientation – orientacja (portrait – pionowa lub landscape – pozioma);
  • aspect-ratio, min-aspect-ratio, max-aspect-ratio – proporcja szerokości do wysokości;
  • device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio – proporcja szerokości do wysokości wyświetlacza;
  • color, min-color, max-color – liczba bitów obsługiwanych kolorów (0 dla czarno-białego);
  • resolution – zagęszczenie pikseli, w dpi lub dpcm (np. 300dpi lub 300dpcm);
  • scan – rodzaj skanowania urządzenia telewizyjnego (progressive lub interlace).

 

Jakie własności elementów można zmieniać w Media Queries – w zasadzie wszystkie własności z CSS, ale najczęściej używane w tym celu będą: width, height, display, float, background (np. do usunięcia obrazkowego tła dla najmniejszych urządzeń), czyli te, z których korzysta się do ułożenia elementów.

Ten sposób jest polecany również przez Google oraz stosowany na ich stronie About Google. Jedynie gdy układ strony jest taki, że nie ma możliwości z niego skorzystać, wtedy faktycznie można przekierować użytkownika mobilnego na inną witrynę. Jedyny problem z Media Queries to najstarsze wersje przeglądarek, które tego nie obsługują. Kwestia dotyczy Internet Explorera w wersji aż do IE 8, Firefoksa poniżej 3.5, Opery poniżej 7 oraz Safari 1-2. Obejmuje to prawie 10% internautów. Dla nich można dołączyć dodatkową bibliotekę JavaScript (np. css3-mediaqueries-js), która doda obsługę zapytań media.

Na koniec polecamy obejrzeć interesującą infografikę na temat Media Queries:
theultralinx.com

4 thoughts on “Użycie Media Queries na stronie dla użytkowników mobilnych

  • Robert

    Piszesz, że dla starszych przeglądarek trzeba dołączyć jakąś bibliotekę. Jak to zrobić? Jakieś wskazówki…

    Odpowiedz
    • Łukasz Przestrzelski

      Można pobrać plik stąd, wrzucić na swój serwer i dołączyć tak jak każdy inny plik JavaScript. Ale żeby mieć zawsze najnowszą wersję, polecam użyć tego kodu (w nagłówku strony):

      <!–[if lt IE 9]>
      <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”>
      <![endif]–>

      Odpowiedz