Artykuł ten poświęcono w całości przeglądarkom instalowanym w smartfonach. Możesz więc na moment zapomnieć o przenośności i zapewnianiu zgodności z wieloma platformami mobilnymi. Tym razem skoncentrujemy się na możliwościach najbardziej rozbudowanych przeglądarek mobilnych i najpopularniejszych obecnie smartfonów. Na tej podstawie opracujemy atrakcyjne aplikacje wykorzystujące potencjał tych zaawansowanych przeglądarek. Tu dowiesz się, jakie są najważniejsze funkcje i ograniczenia poszczególnych przeglądarek oraz gdzie szukać podręczników dla programistów i dokumentacji producentów.

Wszystkie przeglądarki mobilne tutaj opisane obsługują język XHTML, standard CSS2 i skrypty języka JavaScript. Większość dodatkowo obsługuje technologię AJAX. Oznacza to, że przeglądarki instalowane w smartfonach stanowią efektywną platformę dla dynamicznych aplikacji internetu mobilnego. Naszą analizę rozpoczniemy od przeglądu typowych funkcji wspólnych dla wielu przeglądarek smartfonów. Zaraz potem przystąpimy do omawiania funkcji właściwych przeglądarkom

instalowanym w telefonach iPhone, w systemie Android, w systemie webOS, w telefonach BlackBerry, w telefonach Nokia Series 60 i w urządzeniach z systemem Windows Mobile. Zakończymy ten rozdział omówieniem przeglądarki Opera Mobile, czyli przeglądarki dla smartfonów opracowanej przez niezależnego producenta (także w zestawieniu z inną przeglądarką tego samego pochodzenia, czyli Operą Mini).

Popularne techniki tworzenia witryn dla przeglądarek instalowanych w smartfonach

Przeglądarki instalowane w smartfonach stosują takie same techniki przetwarzania i wyświetlania dokumentów języków znaczników. Przykładowo znacznik <meta> viewport kontroluje logiczne wymiary i skalowanie obszaru wyświetlania w przeglądarce. Zdarzenia onresize i onorientationchange języka JavaScript przechwytują zmiany orientacji ekranu urządzenia mobilnego (np. wskutek obrócenia z trybu poziomego do trybu pionowego). Właśnie JavaScriptu można użyć do określenia nowej orientacji ekranu po zmianie.

Oprócz dokumentacji technicznej udostępnianej przez producentów urządzeń i przeglądarek, warto zapoznać się także z doskonałymi tabelami obsługi zdarzeń i obiektów JavaScriptu przez urządzenia mobilne na blogu QuirksMode Petera-Paula Kocha pod adresem www.quirksmode. org/m/table.html.

Znacznik <meta> viewport

Wiele przeglądarek instalowanych w smartfonach skaluje strony internetowe, tak aby zajmowały całą szerokość obszaru wyświetlania. Takie rozwiązanie umożliwia prezentowanie dokumentów zoptymalizowanych pod kątem tradycyjnych przeglądarek internetowych. Przeglądarki umożliwiają użytkownikom przybliżanie i oddalanie skalowanych stron internetowych.

Przykładowo przeglądarka Opera Mobile stosuje obszar wyświetlania o domyślnej szerokości 850 pikseli, natomiast w urządzeniach iPhone domyślna szerokość obejmuje 980 pikseli. Znacznik <meta> viewport umożliwia programiście mobilnej strony internetowej określenie najlepszego rozmiaru obszaru wyświetlania i - tym samym - wymuszenie skalowania stosowanych limitów dla danego dokumentu. Opisywany znacznik <meta> decyduje o logicznej szerokości, logicznej wysokości i początkowym współczynniku skalowania okna przeglądarki (lub obszaru wyświetlania) w przeglądarkach instalowanych w telefonach iPhone i BlackBerry oraz w pozostałych przeglądarkach mobilnych, w tym w przeglądarce Opera Mini.

W niektórych smartfonach znacznik <meta> viewport dodatkowo określa, czy użytkownik może skalować daną stronę internetową i - jeśli tak - jakie są maksymalne i minimalne współczynniki skalowania. Sama obecność znacznika <meta> viewport określa, że dany dokument języka znaczników zoptymalizowano z myślą o urządzeniach mobilnych.

Wartością atrybutu content znacznika <meta> viewport powinna być lista oddzielonych przecinkami par dyrektywa-wartość. Poniżej przedstawiono znacznik <meta> wymieniający wszystkie te dyrektywy wraz z przykładowymi wartościami:

<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=2.5, maximum-scale=5.0, minimum-scale=1.0" />

Dyrektywy width i height określają odpowiednio logiczną szerokość i wysokość obszaru wyświetlania. Dyrektywom tym należy przypisać albo wartość numeryczną reprezentującą szerokość obszaru wyświetlania (w pikselach), albo specjalny token. Dyrektywie width można przypisać token device-width, który określa, że szerokość obszaru wyświetlania powinna odpowiadać szerokości ekranu danego urządzenia. Podobnie dyrektywie height można przypisać token device-height określający, że wysokość obszaru wyświetlania powinna odpowiadać wysokości ekranu danego urządzenia

Dyrektywa user-scalable ustala, czy dany użytkownik może przybliżać i oddalać obszar wyświetlania, skalując widok strony internetowej. Wartość yes umożliwia użytkownikom przybliżanie strony, natomiast wartość no zapobiega przybliżaniu i skalowaniu strony przez użytkownika. Programista mobilnej witryny internetowej może zapobiec możliwości skalowania stron przez użytkownika, przypisując tej dyrektywie wartość no - takie rozwiązanie jest uzasadnione dla stron zoptymalizowanych pod kątem urządzeń mobilnych, które nie wymagają przybliżania i oddalania obrazów.

Dyrektywa initial-scale ustawia początkową wartość współczynnika, tzw. mnożnika skalowania (przybliżenia) dla danej strony internetowej. Domyślna wartość początkowa zależy od przeglądarki stosowanej w smartfonie. W większości przypadków wartość początkową ustawia się w taki sposób, aby cała strona mieściła się w obszarze wyświetlania. Wartość 1.0 powoduje wyświetlenie dokumentu bez skalowania.

Dyrektywy maximum-scale i minimum-scale określają odpowiednio maksymalną i minimalną wartość współczynnika skalowania (przybliżania) ustawianego przez użytkownika. Wartości przypisywane tym dyrektywom muszą mieścić się w przedziale od 0.25 do 10.0. Podobnie jak w przypadku dyrektywy initial-scale, wartości tych dyrektyw dotyczą współczynnika (mnożników) skalowania stosowanego dla treści w obszarze wyświetlania.

Niemal wszystkie przeglądarki instalowane w smartfonach obsługują dyrektywy width i user-scalable znacznika <meta> viewport. Warto zwrócić uwagę na brak obsługi dyrektywy user-scalable przez przeglądarkę mobilną Opera Mobile - twórcy tej przeglądarki uznali, że użytkownicy mobilni zawsze powinni mieć możliwość skalowania stron internetowych. Wiele przeglądarek instalowanych w smartfonach i korzystających z silnika WebKit (więcej informacji na ten temat można znaleźć w podrozdziale „Silnik WebKit w mobilnych przeglądarkach internetowych") obsługuje wszystkie dyrektywy znacznika <meta> nazwanego viewport. Ponieważ w znaczniku <meta> programista deklaruje rozmiar i sposób skalowania obszaru wyświetlania, przeglądarki, które nie obsługują tych dyrektyw, powinny bezpiecznie i bez angażowania użytkownika (np. poprzez wyświetlanie komunikatów o błędach) ignorować odpowiednie konstrukcje.

Poniższy przykład znacznika <meta> wymusza na przeglądarce mobilnej ustawienie szerokości obszaru wyświetlania równej szerokości ekranu smartfonu (niezależnie od wartości tego parametru) oraz wyłączenie możliwości skalowania dokumentu przez użytkownika. Znacznik <meta> w tej formie jest dość często stosowany w kodzie stron optymalizowanych pod kątem przeglądarek mobilnych, ponieważ umożliwia użytkownikowi przeglądanie i przewijanie treści strony bez możliwości jej przybliżania i oddalania:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />

Na rysunku 7.1 pokazano przykład mobilnej strony internetowej z listingu 9.2 (z rozdziału 9.) w wersjach z powyższym znacznikiem <meta> viewport oraz bez tego znacznika wyświetlonych na ekranie smartfonu Palm Pre. Warto zwrócić uwagę na sposób, w jaki znacznik <meta> viewport wpływa na skalowanie i początkową użyteczność tej strony. Wyłączenie możliwości przewijania i ustawienie odpowiedniej szerokości obszaru wyświetlania w praktyce wyklucza konieczność przybliżania widoku treści strony.

Rysunek 7.1. Mobilne strony internetowe odpowiednio ze znacznikiem <meta> viewport i bez tego znacznika wyświetlone na ekranie telefonu Palm Pre