如何製作網站的移動版

Question

我在尋找能夠幫助我瞭解如何設置我的網站的內容，以便人們在使用該網站時可以使用常規版本和移動版本。我遇到的問題是，我在google上看到的大多數網站都是支付網站，可以幫助您設置該網站。我可以製作兩個版本的網站，並在我的託管中加載它們嗎？它怎麼知道什麼時候加載移動設備和普通的？這些是我期待學習的東西的類型，對於開始的地方有什麼建議？

Answer 1

請請請務必做到以下幾點：

1. 只做一個移動版本，如果它增加了價值。
2. 如果用戶請求來自移動設備的深層鏈接，不要重定向到移動主頁
3. 允許用戶選擇查看完整版
4. 確保平板電腦如iPad的使用默認爲完整版
5. 請勿將WML用於高分辨率智能手機，如iPhone
6. 如果您的全尺寸網站在手機上無法使用，請考慮將其調整爲更合適（不要打印內容文本太寬）。

現代的iPhone和iPad完全能夠處理大多數全尺寸的網站，除非真正改善用戶體驗，否則幾乎不需要移動版本。我討厭將它重定向到一個不提供我所需信息的寶貝界面。

移動版的很好的例子包括：

• 谷歌網站
• Gmail網站

平庸的例子包括：

• 任何blogpress網站

個

壞例子包括

• 任何使用WML

---

這裏是蘋果公司的advice on providing mobile versions to the iPad：

注意，Safari瀏覽器的iPad用戶 代理字符串包含單詞 「手機「，但不包含 單詞」iPhone「。如果您目前 服務移動內容的任何瀏覽器 自我標識爲「移動」，你應該 修改您的用戶代理字符串 檢查，以尋找iPad和避免 它發送您的 網站的版本錯誤。 字符串中的版本號會隨着時間而改變 ，因爲新版本的iPad 上的Safari變得可用，因此 檢查用戶代理字符串的任何代碼 都不依賴於版本號。

Answer 2

需要注意的是@mobile css媒體類型，它用於在移動設備中加載時加載不同的樣式。我不確定哪些設備支持它，但我想它會是大多數流行的模型。就你的建議而言，你當然可以託管兩個獨立的網站，但在你經歷麻煩之前，我會挑釁地通過Alex的建議。

http://www.w3.org/TR/css-mobile/

Answer 3

亞歷克斯有一些很好的建議，但如果你真的想基於服務一個特定版本的移動或非移動，你可以看看HTTP頭。在某些情況下，用戶代理會放棄它，但並非總是如此。看看這個鏈接的細節：http://detectmobilebrowsers.mobi/