Z roku na rok rośnie liczba osób aktywnie korzystających z mobilnego Internetu na ich smartfonach. Wyświetlacz smartfonu bardzo różni się od monitora stacjonarnego komputera PC lub laptopa pod względem rozmiaru, rozdzielczości i orientacji. W związku z tym, podczas przeglądania tej samej strony internetowej z komputera i smartfona, osoba zobaczy dwa różne zdjęcia. W pierwszym przypadku będzie to pięknie zaprojektowana i poprawnie wyświetlona strona. W drugim przypadku - strona ze zbyt małym nadrukiem i odsunięta na bok poszczególne bloki. Ostatnio jednak webmasterzy coraz bardziej obawiają się dostosowania swoich witryn do przeglądarek mobilnych, ponieważ dzięki temu ruch mobilny będzie utrzymywany na stronach zasobu.
Przede wszystkim mówimy o poprawnym wypełnieniu znacznika widoku meta. Jest napisane w tym samym miejscu, w którym znajdują się inne metatagi strony (tytuł, opis) - w nagłówku. Głównym celem rzutni meta jest regulacja szerokości i skali strony, gdy jest wyświetlana w przeglądarce. Regulacja tych parametrów następuje w zależności od wyświetlacza (w szerokości i rozdzielczości), który posiada urządzenie. Oto przykładowy kod wykorzystujący metatag meta viewport - <meta name = "viewport" content = "width = szerokość urządzenia; skala początkowa = 1,0; maximum-scale = 1.0; ">. Przejrzyj parametry. Parametr szerokości (szerokość wyświetlanego obszaru) ma przypisaną wartość szerokość urządzenia (szerokość wyświetlacza urządzenia). Parametr w skali początkowej ma wartość 1 (czyli 100%). Parametrowi maksymalnej skali jest również przypisywana wartość 1. Innymi słowy, ustalona skala jest ustawiana podczas oglądania. Zawartość znacznika widoku meta można zapisać bezpośrednio w kaskadowych arkuszach stylów.
Można również użyć specyfikacji CSS3 o nazwie Media Queries, aby opracować responsywny projekt. Jest wstawiany bardzo łatwo - bezpośrednio do kodu HTML strony. Na przykład <link href = "style.css" rel = "styleheet" media = "screen i (orientacja: portrait) i (min-width: 1000px), projekcja" />. Dzięki tej specyfikacji można pisać oddzielne bloki z regułami CSS dla wyświetlaczy o określonej rozdzielczości lub orientacji (pionowej lub poziomej). W zależności od charakterystyki wyświetlacza, ten lub ten blok zacznie obowiązywać. Parametr orientacji, jak rozumiesz, ustawia orientację. Parametr min-width jest minimalną szerokością wyświetlania (jeśli ma szerokość większą niż podana tutaj, pewne reguły CSS zaczną obowiązywać).
Kolejnym narzędziem do omówienia jest Modernizr. Jest to specjalny skrypt, którego głównym zadaniem jest ustalenie, czy przeglądarka użytkownika obsługuje nowe standardy HTML5 i CSS3. Jeśli nie ma wsparcia dla tych standardów, uproszczona i lekka wersja witryny zostanie załadowana do przeglądarki. W przeciwnym razie zostanie załadowana pełna wersja (z całą funkcjonalnością i wszystkimi efektami). Możesz go pobrać stąd - http://modernizr.com.
Z pomocą wtyczki jQuery o nazwie TouchSwipe możesz jeszcze bardziej dostosować swoją witrynę do sterowania dotykowego. Po poprawnej instalacji wtyczki strony twojego zasobu łatwo rozpoznają wszystkie główne gesty palców (i odpowiednio na nie zareagują). Na przykład wtyczka obsługuje rozpoznawanie takich gestów jak zamiana, stukanie, szczypanie, powiększanie, wielodotyk itp. Możesz go pobrać tutaj - http://labs.rampinteractive.co.uk/touchSwipe/demos.
Możesz nawet zrobić to, aby po dodaniu strony do ekranu głównego urządzenia pojawiła się specjalna ikona w stylu iOS (użytkownicy iPhone'ów i iPadów z pewnością to docenią). Aby utworzyć ikonę, należy wcześniej przygotować trzy zdjęcia - na iPhone'a, iPada i iPhone'a Retina. Nazwij zdjęcia w następujący sposób - touch-icon-iphone.png, touch-icon-iphone-retina.png i touch-icon-ipad.png. Następnie prześlij je do katalogu głównego witryny. W nagłówku musisz zarejestrować następujący kod:
<link href = "touch-icon-iphone.png" rel = "apple-touch-icon" />
<link href = "touch-icon-ipad.png" rel = "apple-touch-icon" rozmiary = "72 × 72 ″ />
<link href = "touch-icon-iphone-retina.png" rel = "apple-touch-icon" rozmiary = "114 × 114 ″ />.
