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> ...
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:
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).
Tudor Turcu - blog 