創建Wordpress網站的移動版本

Question

我們有一個專為台式機開發的網站，現在我很榮幸能夠創建它的移動版本。 移動設計可能與台式機版本完全不同，並且網站基於Wordpress構建。 現在我不確定什么是最好的方法：

1. 我應該只堅持CSS更改（盡可能多）並使用媒體查詢來定位較小的屏幕嗎？ 我擔心即使顯示為“大”也無法下載大圖像。 每個頁面上也有很多JS發生，並且該JS不會在網站的移動版本中使用，因此我可能必須進行其他檢查，等等。這種方法還有其他可能的問題嗎？

2. 服務器端代碼應檢測其移動瀏覽器，並應返回自定義html？ 此方法還有其他可能的問題嗎？

3. 以上兩種的混合物？

4. 還有其他選擇嗎？

如果有人在類似項目上有經驗，並且可以指出解決方案，那將是很棒的。

Answer 1

我是Wordpress響應主題的忠實擁護者。 它是非常可定制的，將允許您將一個站點同時用於移動和桌面。

https://wordpress.org/themes/responsive

Answer 2

盡可能使用媒體查詢來更改布局。 為您的JS創建一個小的斷點處理程序，該處理程序將觸發js運行或停止。

我認為很多人沒有意識到壓縮的2倍圖像小於壓縮的1倍圖像。 因此，如果對圖像使用壓縮，則僅使用大圖像實際上會獲得更好的網絡性能。 顯示多少圖像是一個可能導致性能下降的潛在問題，但我認為這並不重要。

您在移動設備上使用的UI與在桌面設備上使用的UI完全不同，還是元素的定位不同？ 如果必須支持兩個模板，則需要考慮Adaptive（服務器響應），服務器將根據UserAgent確定將哪個模板發送給客戶端。 除了客戶端具有的瀏覽器類型外，UserAgent不會真正給您帶來很多好處。 要弄清楚設備屏幕的尺寸，您需要知道尺寸或使用WURFL之類的服務。

如果您可以使用媒體查詢在一個模板中完成所有UI更改，那么最好從Mobile First方法開始進行此工作，並且基本上從頭開始了解網站的移動外觀，然后弄清楚如何重新-將頁面上的元素放置在盡可能接近當前桌面外觀的位置。 使用自適應與自適應方法將消除對UserAgent檢測的需要，並且您將僅使用設備的寬度。

在“移動”與“台式機”中對響應式的思考實際上是有局限性的，並且會引起一些混亂。 移動設備應指代更改位置的設備。 嘗試使用小，中和大等名稱來描述響應頁面的布局（斷點）。

最后，沒有首選的方式來執行“響應式”。 每個站點都會有自己需要滿足的要求。 您需要學習盡可能多的知識，並根據自己的需要創建首選的方式。

Answer 3

您可以隨時使用：

 <meta name = "viewport" content = "width = device-width">

在您的標題中。 然后，整個站點將調整大小以適合移動設備。

您所有的js仍應可在移動設備上運行。 只是“閃光”而不會。

網站對此並不“響應”，但是根據網站以及訪問者需要多少交互等，有時這是否足夠簡單？