Obecnie jestem na etapie stworzenia mobilnej wersji bloga i niestety nie jest tak prosto, jak się myślało na początku.
Idea polegała na tym, aby stworzyć kolejny styl, dostosowany do urządzeń mobilnych o max rozdzielczości 320px i wstawić to jako media=“handheld” - wedle przyjętych standardów. O ile teoria jest ciekawa, to w praktyce ma się to inaczej (niczym proza życia).
Cała sprawa jest związana z natywnymi i zewnętrznymi przeglądarkami, takie jak MiniMap czy OperaMini. Te w/w przeglądarki mimo, że są mobilnymi przeglądarkami, to domyślnie mają ustawione media=“screen” i wynik pracy jest zupełnie inny od założenia. Ale skoro nowoczesne przeglądarki mają obsługę JavaScript i AJAX, to można wymusić wczytanie odpowiedniego arkusza CSS - oczywiscie z pomocą przychodzi
navigator.userAgent
i sprawę mamy prowizorycznie załatwioną, do momentu, kiedy trzeba wiedzieć, pod jakimi identyfikatorami występują te przeglądarki. Dla przykładu mam opisane Iphone, Ipoda, Opera Mini czy SymbianOS ale w rzeczywistości jest ich znacznie więcej i póki co, to te są najbardziej praktykowane w Polsce. Wada? W momencie braku wsparcia dla skryptów JS, przeglądarka nie wczytuje tego mobilnego arkusza.
Oprócz arkuszy CSS, również ważne jest semantyka i porządek w kodzie, tak, żeby nie generował niepotrzebnej treści i nadmiaru wagi wczytywanej strony www. W przypadku strony optymalizowanej specjalnie pod kątem urządzeń mobilnych problem nie istnieje,natomiast w przypadku normalnej strony, to pojawia sie problem z grafiką i innymi małoistotnymi elementami - oczywiscie można deaktywować, ale i tak bedą wczytane.
Weźmy na przykład wygląd mojego bloga - w większości jest oparte na stylach z niewielką ilością skompresowanej grafiki, nie zapominając o Mootools’ie i jego wtyczkach, które relatywnie ważą sporo. Problem z Mootoolsem można rozwiązać poprzez zastosowanie wspomnianej wcześniej detekcji przeglądarek i do tego zmierzam.
Ogólnie to mobilne przeglądarki są dość dziwne, bo skoro są przeznaczone do mobilnych stron, to najwyższy priorytet powinny mieć właśnie te arkusze z atrybutem media=“handheld” a nie jak “screen”. Cóż, life is a bitch 😉