Feed on
Posts
Comments
Email訂閱

部落格是用wordpress架站,有現成的plug in,可以將網頁內容以行動裝置友善的方式呈現。旅聯網必須自己做調整。可參考網路上資料,上網搜尋「mobile web design」或是「讓網頁適合在行動裝置上瀏覽」,並參考wordpress的plugin的程式碼。步驟是:

  1. 檢查client的瀏覽是否來自行動裝置。 檢查 $_SERVER[“HTTP_USER_AGENT”] 是否含有行動裝置的特殊字串如 iphone或是Andorid。
  2. 如果是來自行動裝置則將之導向到另外一個特別為行動裝置設計的網頁。
  3. 在行動裝置友善的網頁的<head>區段,加入以下宣告
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;" />

    其中viewport設為device-width,則會將網頁自動調整成行動裝置的寬度大小(譬如從1024寬度調整到320),字型與圖片都會更適合瀏覽。
  4. 在banner上只放置logo與搜尋框。
  5. 從資料庫取出內容後以直覺、簡潔的方式呈現內容,可參考facebook 塗鴉牆的呈現方式。作者圖像、作者名稱、遊記影像、遊記標題、遊記摘述、出遊日期與推薦數。
  6. 一次只顯示5篇遊記,並利用jquery結合ajax以顯示更多遊記。
  7. 可以從行動版回到完整版網頁,透過網址參數傳遞告訴完整版網頁這是由行動版網頁所回返的,不需要再自動轉址回行動版。
  8. 後續可考量其他頁面是否也有行動版的需求。

    相關文章

    留言區