案例分享：Windows Phone上的移動浏覽體驗

      為智能手機使用者提供最好的移動浏覽體驗是Windows Phone浏覽器開發團隊追求的目标，我們團隊裡有幾個小組共同實作這個目标，我們分别負責：出色的浏覽器UI設計，浏覽各類網站時的相容性，以及高效的頁面渲染和呈現。即使我們每個小組都努力工作達到了各自目标，我們可能會遺漏最關鍵的一點——為使用者提供最好的網頁浏覽體驗必須要靠我們團隊和所有網頁開發者共同合作才能完成！要達到這一點必須由我們通力合作，確定網頁的内容和服務能在Windows Phone上呈現完美的效果。

    衆所周知，因為來自移動裝置的浏覽量與日俱增，是以網頁的開發資源永遠顯得不足。可惜“設計一次，在所有裝置上運作”的理想至今能完全實作。幸運的是因為IE9加入到Windows Phone7.5上，我們朝此目标邁出了一大步。通過在PC和windows phone上共享IE9核心，網頁設計不僅可以在桌面和手機上基于同樣的标準，而且還通過硬體加速提升浏覽性能。我們樂于聽到Windows Phone7.5網頁開發者的回報，是以這篇部落格中收集并整理了一些開發者的回報聲音。

    最近，ESPN.com将他們卓越的Web網站體驗搬到了Windows Phone上，我們覺得有必要将其開發Windows Phone版本網頁的經驗與大家分享。這裡要提一下， ESPN此次對Windows Phone平台的網頁相容工作始于我在他們官網支援頁面的一條使用者請求：我的很多同僚是體育迷，大家經常詢問我在WP7.5上浏覽體育類網站的體驗。是以我像其他ESPN的普通使用者一樣給ESPN寫了這條留言。我發的留言很快就傳到了ESPN的移動網站開發團隊；說實話，我非常的敬佩ESPN對使用者需求的響應的迅速。以下是團隊的技術經理Mike Marrone在WP7.5平台IE9相關開發上分享的經驗：

    總體上說，整個開發是個簡單的過程。我們隻支援WP7.5和IE9是因為其對CSS3/HTNL5良好的支援。由于已經在舊型号手機上我們已經有一個現成的移動版網頁，這個優化相當友善。其實在WP7.5平台上做開發的過程幾乎可以完全在桌面端的IE9上完成，在PC上完成所有開發工作後，隻需遷移到手機上進行最後的品質驗證。

一些細節的開發經驗分享：

1） WP7.5不支援“display：box”的CSS樣式。這個樣式一般用來實作自動旋轉對齊，而無需用程式計算透視試圖的大小（也就是說浏覽器根據裝置旋轉狀态自動轉化這些内容的位置）。WP7.5為我們提供了更好的選擇，因為他是唯一支援CSS "vw"單元的手機浏覽器。

2）WP7.5與其他裝置在CSS上的主要差别集中在梯度方面，但由于WP7.5有一套細緻可靠的選項使我們在開發上不會遇到太大的問題。

3）額外添加JavaScript的觸摸事件是個不錯的選擇。我們期望你們在手機開發上獲得成功！

    你可以想象我們是多麼希望多聽到這樣的案例！我們自己内部經常使用PC端IE測試bug，是以很高興聽到這IE不僅是在我們内部，在外界也被用作一款開發的工具。我們歡迎使用者回報（這些回報将會有助于我們未來的産品規劃），同時也歡迎大家直接留下進一步的回報和評論。

    Windows Phone平台上的IE9能夠提供豐富多樣的表現形式和完美的使用者體驗，要達到這一目的，隻需要修改網頁的user-agent和html&CSS底層标準（而不是預先自寫的）。ESPN僅投入有限的資源進行開發，卻給使用者提供了卓越的浏覽體驗。我身邊不少朋友将ESPN首頁放到桌面上，即使我以後發現我的進階經理在會議期間偷偷看ESPN新聞，我也不會感到奇怪。

下面是ESPN.com頁面在Windows Phone7.5上之前（左）和之後（右）的截屏，我們要對ESPN說聲感謝，同時我們期望看到ESPN做出更加豐富的表現形式和更優秀的使用者體驗！

鳴謝來自ESPN的Krys Krycinski, Mike Marrone, 和James Ballow.

Amin Lakhani

項目經理 Windows Phone團隊

英語原文：

<a href="http://windowsteamblog.com/windows_phone/b/wpdev/archive/2012/05/02/delivering-rich-mobile-web-experiences-in-windows-phone-7-5-espn-com-case-study.aspx">http://windowsteamblog.com/windows_phone/b/wpdev/archive/2012/05/02/delivering-rich-mobile-web-experiences-in-windows-phone-7-5-espn-com-case-study.aspx</a>