優化移動設備的網站

Question

我正在開發專門用於移動瀏覽器的網站。 我應該遵循哪些準則來優化移動開發網站？ 我的主要擔憂：

1. 大多數移動設備都有合適的瀏覽器。如何在這些不同的瀏覽器上測試應用程序（由於安全限制，無法在實際設備上進行測試）？

2. 如何針對不同屏幕尺寸優化網站？

3. 如何使應用程序觸摸友好？

4. 如何檢測設備的方向（在加速度計附帶的設備中）？

5. 如何檢查設備不是臺式機/筆記本電腦？

Answer 1

我在設計移動網站時使用過的東西。

1. 找出您打算支持的設備的範圍。你可以問一些問題是
   • 有U將只支持智能手機
   • 哪些平臺是U計劃支持（iPhone，安卓，塞班？）

很多你問題可以通過您可以收集的那種分析來回答。如果你的統計數據非常少，那麼你可以按照這個策略開始。

1. 分離出來的設備的目標範圍爲

   • 簡單的（基本的手機以最小的瀏覽功能。） - 設計一個非常簡單普通的香草網站他們。
   • 中等（老一代智能手機瀏覽器支持JavaScript差） - 設計一個功能略好的網站。
   • 高端智能手機（iPhone，Android，WebOS） - 提供這些手機支持的爵士功能。

2. 使用WURFL/.Mobi等設備檢測庫進行設備檢測，使用WALL進行內容動態呈現。

3. 您可以使用.Mobi檢測符合HTML5的移動瀏覽器。這樣，您就可以利用支持它的設備中的HTML5功能。

4. 測試你可以按照這個方法在瀏覽器

   • 測試 - 火狐/ Safari瀏覽器/歌劇有插件來改變USER_AGENT並可以模擬移動測試。
   • 模擬器測試 - 所有設備平臺都提供免費下載模擬器
   • 如果需要，嘗試設備仿真產品，如設備在任何位置/完美。

我希望我能澄清一些ATLEAST你的問題。 :)

Answer 2

權威指南必須是W3C移動網絡最佳實踐：http://www.w3.org/TR/mobile-bp/不要讓它的長度讓你失望 - 我發現它比其他W3C規範更容易閱讀。關鍵部分是最佳做法聲明，通常以示例形式分爲一口大小的塊。這裏還有一個最近的和廣泛的移動網頁優化指南：http://dev.opera.com/articles/view/the-mobile-web-optimization-guide/（免責聲明：我爲Opera工作）

Answer 3

Q1大多數移動設備都有合適的瀏覽器。如何在這些不同的瀏覽器上測試應用程序（由於安全限制，無法在實際設備上進行測試）？

答案取決於您想要測試和支持的設備數量。

iPhone：設備和模擬器可用。 Android：設備和模擬器可用

其他手機？

檢查http://www.deviceanywhere.com

當然，你需要支付服務費。但我認爲它是合理的。

Q2如何針對不同屏幕尺寸優化網站？

iPhone4的 WVGA854 WVGA800 VGA HVGA QVGA QCIF +

製作內容爲所有不同尺寸是困難的。所以必須對屏幕尺寸和支持的型號做出選擇。

Q3如何使應用程序觸摸友好？

這是你的設計問題。

Q4如何檢測設備的方向（在加速度計附帶的設備中）？

Android和iOS有關於此類事件的特殊消息。你必須遵循這樣的信息。 當然，你需要風景和portlait佈局。

Q5如何檢查設備不是臺式機/筆記本電腦？

您可以使用User-Agent標頭或IP地址。但IP地址不是好方法。