Windows Phone, HTML și fonturi..

Am încercat ieri să imi dau seama dacă e o coincidență sau nu faptul că majoritatea site-urilor care nu au fost gândite special pentru un mobile, pe Windows Phone in IE9, apar cu un font extrem de mic.Inițial m-am gândit că acele site-uri sunt prost gândite și specifică dimensiuni absolute în pixeli (gen 10px), și asta e cauza.
Ca să testez ipoteza, am creat o pagina foarte simplă, doar text, fără nici o dimensiune de font specificată:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test HTML Page</title>
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie placerat lacus in ullamcorper. Donec pretium tempor dui, iaculis porttitor nisl faucibus id. ...
</p>
...
În ciuda așteptărilor, pe Windows Phone (Mango, 7.1), în IE 9, implicit pagina rămâne accesibila doar celor cu ochi de vultur sau cu telefoane cu ecrane de 6inchi:

WP7 IE9 Default font size

Portrait sau landscape, arată la fel; un double-tap nu schimbă nimic. Doar zoom-ul mai poate fi folosit pentru a face textul “citibil”.

După mai multe săpături, se pare că nu e un bug, ci “by design”: IE9 pe Windows Phone plecă de la ipoteza că un site care nu a fost optimizat pentru un mobile, nu va arăta ok pe un ecran de 800×480 si 3,6″ diagonala, ceea ce e adevarat în multe cazuri: chiar dacă nu s-au specificat dimensiuni absolute pentru font in px, pagina conține alte elemente (div-uri, imagini, meniuri etc.) care nu știu să își facă reflow automat cand viewport-ul devine foarte mic, ca pe un mobil.

Soluția? Un meta tag care îi zice lui IE: lasă-mi pagina în pace, nu o scala:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Test HTML Page</title>
<meta name="viewport" content="width=device-width" />
</head>
<body>
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse molestie placerat lacus in ullamcorper. Donec pretium tempor dui, iaculis porttitor nisl faucibus id. Aliquam sed turpis augue, in dapibus nibh. ...</p>
...

După această modificare, pagina va arăta normal:

WP7 IE9 normal text size

Imaginile de mai sus sunt screen captures de pe device, nu din emulator (pentru cine mai zice ca WP7 nu are soft de screen capture 🙂

Explicația mai pe îndelete, la: http://blogs.msdn.com/b/iemobile/archive/2011/01/21/managing-the-browser-viewport-in-windows-phone-7.aspx

Probabil soluția nu e cea mai elegantă – urmează să vad cum apare o astfel de pagină pe alte device-uri (iPhone, Android, Opera Mini/Mobile pe Symbian cel putin..).
(dacă vreun posesor de iPhone nimerește din întâmplare pe aici, l-aș ruga să-mi spună cum apare implicit pagina: http://www.turcu.name/playground/mobile.html – fără zoom).

L.E.: Săpând putin mai mult, se pare că <meta name=”viewport” content=”width=device-width” />
e deja un “de facto standard” suportat (mai mult sau mai puțin uniform) pe majoritatea browserelor actuale de pe smartphones cel puțin:

IE pe WP7: http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx
Firefox mobile (Fenec): https://developer.mozilla.org/en/Mobile/Viewport_meta_tag 
Apple Safari:
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
Opera Mobile: http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

Oricum, morala ar fi: pentru pagini simple, care prezintă mai mult conținut, fară layout-uri complexe, nu e musai o versiune “mobile” separata (sau un CSS separat), și cu atât mai mult nu e nevoie de “apps” special făcute pentru fiecare platforma în parte, care doar afișează niște content. În ziua de azi e posibil deoarece foarte putina lume mai foloseste mobile care nu stiu HTML (ci doar WAP), mai toate mobilele suporta macar XHTML 1.0 daca nu HTML5.

Din păcate (sau fericire), idealul unei platforme comune pe web bazată (în ordine cronologica) pe Java Applets, Flash sau Silverlight – in brower (ca plugins) – s-a destrămat de ceva vreme (atât Adobe cât și Microsoft au declarat oficial ca nu vor mai continua să dezvolte sau suporte plugins de Flash sau Silverlight care să ruleze pe mobile, în browsere).

Advertisements
This entry was posted in Windows Phone and tagged , , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s