RkBlog

Hardware, programming and astronomy tutorials and reviews.

Media queries - CSS dla urządzeń mobilnych

Pojawienie się iPhona, Androida, czy rozwój Opery Mini doprowadziły do zwiększonego zapotrzebowania na aplikacje webowe kompatybilne z nowymi przenośnymi urządzeniami. Dostosowanie silników desktopowych przeglądarek dla potrzeb smartphonów umożliwia twórcom stron www na korzystanie z dobrodziejstw XHTML, CSS, czy JavaScriptu na stronach pisanych pod urządzenia mobilne (choć nie na wszystkich dostępne są te najnowocześniejsze mobilne przeglądarki). Poniżej znajdziesz zbiór wskazówek odnośnie tworzenia stron pod urządzenia mobilne, a także różne przykłady kodu.

Wskazówki dla twórców stron www pod urządzenia mobilne

Wykrywanie urządzeń mobilnych

Jednym rozwiązaniem jest wykrywanie urządzenia mobilnego po nazwie przeglądarki (USER_AGENT) i stosowanie po dopasowaniu odpowiedniego szablonu, lecz nie zawsze tym sposobem da się wykryć wszystkie urządzenia mobilne. Także mogą być problemy, gdy użytkownik łączy się z twoją stroną poprzez różne systemy keszujące - wtedy może dostać wersję niezgodną z dopasowaną nazwą przeglądarki. Można także stosować różne arkusze CSS dla różnych urządzeń za pomocą CSS i atrybutu media (np. handheld). Dla iPhona, czy Androida można zastosować rozwiązanie:
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type="text/css" rel="stylesheet" />
iPhone i Android pod "handheld" nie podpadają:
mobile5
Zastosowanie podejścia różnych arkuszy CSS upraszcza tworzenie wersji dla urządzeń mobilnych, lecz niestety niektóre mobilne przeglądarki, szczególnie te starsze lub gorsze nie obsługują np. typów media dla arkuszy. Jeżeli serwis musi obsługiwać wiele urządzeń, nawet starszych, albo z gorszymi przeglądarkami może być konieczne (znacznie łatwiejsze) stworzenie oddzielnych wersji serwisu dla takich urządzeń bazując po USER_AGENCIE wykrytym po stronie serwera.
Ekran iPhone to 320x480px i przeglądarka Safari w nim dostępna w czasie ładowania zwykłej strony ustala współczynnik pomniejszenia strony, tak by pasowała do rozmiarów urządzenia. Można ustawić własny współczynnik, jeżeli domyślnie strona nie jest skalowana tak jak tego chcemy, wystarczy zastosować:
<meta name="viewport" content="width=320, initial-scale=2.3, user-scalable=no">
W powyższym przykładzie ustawiliśmy współczynnik pomniejszenia na 2.3, oraz wyłączyliśmy opcję skalowania strony przez użytkownika. Wchodząc głębiej w aplikacje www dla urządzeń mobilnych możemy także zainteresować się projektem wurfl zawierającym bazę danych (plik XML lub DB) urządzeń mobilnych i ich możliwości.

Testowanie - emulatory

Jeżeli mamy dostęp do stosownych telefonów to testowanie nie stwarza problemu. Lecz nie zawsze jest tak dobrze (np. na początku procesu projektowania szablonu). Pomocne mogą okazać się wtedy emulatory dostarczane wraz z narzędziami do tworzenia aplikacji na dane mobilne platformy. Dla Androida można pobrać i zainstalować pakiet SDK i za pomocą wtyczki do Eclipse w prosty sposób uruchamiać emulator z różnymi ustawieniami ekranu. W przypadku iPhone potrzebny jest nam komputer firmy Apple i Mac OS X. Wystarczy pobrać iPhone SDK (2GB) i poprzez XCode będzie można odpalić emulator iPhona. Także do Palm Pre (WebOS) dostępne jest SDK wraz z emulatorem (nie testowałem jeszcze. Palm sprawia wrażenie jakby nie chciał popularyzować swoich technologii wśród programistów). Tablety Nokii (N800, N810 i inne) wykorzystują platformę Maemo, która posiada przeglądarkę opartą o silnik Firefoxa. Można zainstalować pod 32-bitowym Linuksem Maemo-SDK (choć dostęp do standardowych aplikacji może być ograniczony).

Trendy w projektowaniu stron dla urządzeń mobilnych

Wiele dobrych rozwiązań można znaleźć oglądając to co zrobili najlepsi w branży internetowej. Przykładowo Facebook oferuje oddzielną stronę dla iPhone http://iphone.facebook.com, który ładnie integruje się z interfejsem telefonu.
mobile1
mobile2
mobile2a

Jak widać strona wygląda bardzo prosto, lecz jest zarazem bardzo czytelna. Formularz logowania jest na tyle mały, że po wysunięciu się klawiatury pozostaje całkowicie widoczny (pierwsze dwa - emulator Androida, trzecie iPhone).

Jednakże strony nie muszą wyglądać goło, wystarczy przyjrzeć się różnym projektom na cssiphone.com, żeby przekonać się iż można śmiało tworzyć "ładne i kolorowe" strony z zachowaniem funkcjonalności. Podane tam strony oprócz iPhona będą kompatybilne także z innymi nowoczesnymi mobilnymi przeglądarkami (np. Android), choć mogą pojawić się drobne problemy (np. brak odpowiedniej wtyczki):

mobile3
mobile4

Nawet azjatyckie specjały można dostosować do iPhona:

mobile7
mobile7a

Przykładowa strona dostosowana do urządzeń mobilnych

Poniżej zaprezentowany jest przykładowy kod strony dostosowanej zarówno dla desktopowych przeglądarek jak i dla tych na urządzeniach mobilnych. Oto plik HTML z dwukolumnowym układem w wersji standardowej:
Z jakiegoś powodu nowsze wersje Androida (zaczynając od wersji 2.3 lub 2.2) nie używają max-device-width. Zamiast tego stosują -webkit-device-pixel-ratio.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Strona Testowa</title>
<meta name="Description" content="Opis Strony Testowej" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="Robots" content="index,follow" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="stylesheet" href="style_print.css" media="print" type="text/css" />
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<!-- nowsze androidy -->
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio:0.75)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]--><style>
/* tak też można  */
@media handheld {
   body {
     background-color:tan;
   }
 }
 @media only screen and (max-device-width: 480px) {
   body {
      background-color:yellow;
   }
 }
</style>
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
</head>
<body>

<div class="content">
<h4>Lorem Ipsum This!</h4>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p>
    <a href="http://validator.w3.org/check?uri=referer"><img
        src="http://www.w3.org/Icons/valid-xhtml10"
        alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a>
</p>
</div>

<div class="menu">
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">my art 1</a></li>
<li><a href="#">my art 2</a></li>
</ul>
<ul>
<li><a href="#">home</a></li>
<li><a href="#">about</a></li>
<li><a href="#">my art 1</a></li>
<li><a href="#">my art 2</a></li>
</ul>
</div>

<p><br style="clear:both;" /></p>

<div class="footer">Moja Strona, Autor Imie i Nazwisko</div>

</body>
</html>
Bardzo ważnym elementem jest wstawienie stylów CSS:
<link rel="stylesheet" href="style.css" media="screen and (min-device-width: 481px)" type="text/css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="style_mobile.css" />
<link rel="stylesheet" href="style_mobile.css" media="handheld" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="style.css" media="screen" type="text/css" />
<![endif]-->
<!-- żeby iPhone nie pomniejszał już dopasowanej mobilnej strony -->
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Domyślny styl wstawiany jest nie jako screen, ale jako: screen and (min-device-width: 481px). Wstawienie go poprzez "screen" spowoduje że np. Android czy iPhone użyją domyślnego arkusza (a przynajmniej ich emulatory). Zastosowanie screen and (min-device-width: 481px) załatwia sprawę dla tych platform, jak i jest poprawnie obsługiwane przez desktopowe przeglądarki takie jak Opera, Firefox, czy te oparte o WebKita (Safari, Chrome).

Styl mobilny dla Androida i iPhone wstawiamy stosując only screen and (max-device-width: 480px).

style.css przeznaczony dla desktopu tworzy układ dwukolumnowy:

body
{
margin:0px;
padding:0px;
font-family:Verdana, Tahoma, Arial, "DejaVu Sans";
line-height: 1.6em;
font-size:1.1em;
background-color:#DDDDDD;
}

.content
{
float:left;
width:73%;
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
text-align:justify;
}

.menu
{
float:right;
width:22%;
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
}

.footer
{
margin:5px;
padding:5px;
text-align:center;
font-size:2em;
font-weight:bold;
border:1px solid #AAAAAA;
margin-top:20px;
margin-bottom:20px;
background-color:white;
}

style_mobile.css dla wersji mobilnych nie stosuje opływania i menu "prawe" umieszczane jest na dole strony poniżej bloku treści:

body
{
margin:0px;
padding:0px;
line-height: 1.6em;
font-size:1.1em;
}
h4
{
font-size:1.5em;
}
.content
{
margin:5px;
padding:5px;
text-align:justify;
}

.menu
{
margin:5px;
padding:5px;
background-color:white;
border:1px solid #AAAAAA;
}

.footer
{
margin:5px;
padding:5px;
text-align:center;
font-size:1.5em;
font-weight:bold;
border:1px solid #AAAAAA;
margin-top:9px;
margin-bottom:9px;
}
Pobierz źródła. Poniżej testowa strona pod iPhone bez i z mobilnym arkuszem CSS:
mobile6b
mobile6
A tak wygląda pod Androidem:
mobile8

Identyfikacje mobilnych przeglądarek (USER AGENT)

iPhone, przykładowo:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
Android, przykładowo G1:
Mozilla/5.0 (Linux; U; Android 1.0; en-us; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2
Android, przykładowo emulator:
Mozilla/5.0 (Linux; U; Android 1.0; en-us; generic) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2
RkBlog

Strony mobilne, 2 July 2009, Piotr Maliński

Comment article