向不同移動設備提供不同頁面結構（HTML）的服務器端選項

Question

我正在研究開發「經典」風格移動網站的最佳做法，即將移動網站作爲移動HTML頁面與小型JavaScript應用程序（jQuery Mobile，Sencha等）。

有兩種通行方式：

1. 提供相同的頁面結構（HTML）到所有的移動設備，然後使用CSS媒體查詢或JavaScript改善更有能力的設備的經驗。
2. 完全向傳遞不同的頁面結構（以及可能的內容）到具有增強功能的設備。

我特別感興趣的是第二方法的最佳實踐。兩個很好的例子是：

1. MIT的移動網站：在相同的URL黑莓和功能（更低）的手機比iOS的& Android設備不同，但可用 - http://m.mit.edu/

CNN的移動網站：同上 - http://m.cnn.com/

我想聽聽來自SO的人的實際工作，並且可以解釋傳遞這種類型的設備相關結構/內容/體驗的最佳實踐。

我不需要在移動用戶代理檢測或WURFL或任何其他（偉大）SO線程（如this one）中涵蓋的任何概念。我已經使用jQuery Mobile和Sencha Touch，並且我熟悉大多數提供最終移動體驗的方法，所以沒有指針要求那裏謝謝。

我真正想明白的是：如何根據服務器端檢測和基於用戶代理組的交付提供這些特定類型的體驗 - 其中有一個精簡的頁面結構（不同的HTML）已交付到一組設備，以及另一種更豐富的HTML文檔交付給較新的設備，但都在相同的子域/ URL。

希望大家都有道理。提前謝謝了。

Answer 1

在NPR，我們使用服務器端的'應用程序'來提供正確的html/css/etc，具體取決於用戶是在高端設備還是在較低層的手機上。

因此，當移動設備打開npr.org頁面時，我們的服務器使用用戶代理檢測方法將它們指向相應的m.npr.org。一旦被引導到m.npr.org網址，網絡應用程序 - 這是寫在groovy，但我認爲可能是一些事情 - 發回網站的觸摸版本或更簡單，剝離的內容。 Web應用程序的選擇至少基於WURFL數據。

我沒有足夠的代表點來發布與屏幕截圖的比較，所以我必須指出你自己的網站。

您可以通過鍵入m.npr.org看到剝離下來的網站在桌面瀏覽器中看到這一點。您可以通過添加參數？devicegate.client = iPhone_3_0來覆蓋默認設備檢測，以查看您剛看到智能手機上的npr.org時所看到的觸摸版本。如果你查看源代碼，你可以看到不同的html & css是在同一個子域中提供的。

希望它有助於在野外看到類似的東西。那有意義嗎？

Answer 2

以檢測移動設備需要哪種格式的一般方式是在接受標頭：

應用/ XHTML + XML> XHTML 文本/ vnd.wap.wml>舊WML WAP頁面 。 。 。

在可以處理所有桌面html格式的新設備上，您可以使用用戶代理。

那麼你要問自己，你想要做什麼：

切換到另一個樣式表（只適用於較新的設備工作）。 切換到另一個視圖邏輯，如構建wml頁面模板。 切換到完整的其他頁面。

我認爲第二種方法是最好的。許多Web框架可以很容易地切換到另一個視圖邏輯，而不用重寫其餘的視圖（mvc模式在其光榮中）。

Answer 3

我有兩個例子給你。

1. 閱讀上的Facebook是如何實現這一點使用XHP給抽象的不同輸出不同的標記：One Mobile Site to Serve Thousands of Phones

   將會有很多的好東西在他們的實際執行，我希望是可用的。我使用一個叫做HawHaw的框架，它可以讓你編寫你的應用程序一次（在PHP對象或XML文件中），並且它基於幾個檢查（接受標題，代理字符串等）向設備輸出正確的標記。