2014-02-12 85 views
1

我們的網站是爲桌面開發的,現在我已經爲創建其移動版本的任務受到祝福。移動設計可能與桌面版本有很大不同,並且網站建立在Wordpress上。現在,我不知道什麼是最好的辦法:創建Wordpress站點的移動版本

  1. 應我堅持到CSS的變化只(儘可能)和使用媒體查詢瞄準較小的屏幕?我擔心即使顯示這些大圖像仍然被下載:無。在每個頁面上也會出現很多JS,而這個JS不會被用在移動版本的站點中,所以我將不得不另外建立可能的檢查等等。這種方法還有其他的問題嗎?

  2. 服務器端代碼應該檢測其手機瀏覽器是否應該返回自定義html?這種方法的其他任何問題?

  3. 以上兩種混合物?

  4. 還有其他的選擇嗎?

如果任何人有類似項目的經驗,並可以指出什麼樣的解決方案會是偉大的。

+0

我認爲這取決於手機版本的不同。如果只是樣式和佈局上的細微差別,您可能可以使用CSS媒體查詢。如果這是一個完全不同的網站,您可能需要爲網站的移動版本提供服務(或重定向)。這就是說,我沒有WordPress的經驗,所以我不知道是否有任何WP特定的解決方案。 – Zhihao

回答

0

使用媒體查詢儘可能進行佈局的變化。 對於JS,創建一個小的斷點處理程序,它將觸發js運行或停止。

我想很多人都沒有意識到壓縮的2x圖像比壓縮的1x圖像小。因此,如果您爲圖像使用壓縮,則只需使用大圖像即可獲得更好的網絡性能。有多少圖像顯示是潛在的問題,可能會導致負面的表現,但我認爲這是微不足道的。

您是否使用完全不同的用戶界面移動比桌面還是隻是一個不同的元素定位?如果您必須支持兩個模板,那麼您需要考慮Adaptive(從服務器響應),其中服務器將根據UserAgent確定將哪個模板發送給客戶端。除了客戶端所具有的瀏覽器類型之外,UserAgent並不能真正幫助你。要弄清設備屏幕的尺寸,您需要了解尺寸或使用WURFL等服務。

如果您可以使用媒體查詢在一個模板中完成所有UI更改,那麼最好從「移動優先」方法開始工作,基本上從您的移動網站的外觀開始,然後弄清楚如何重新定位頁面上的元素以儘可能地匹配當前的桌面外觀。使用響應與自適應方法將消除對UserAgent檢測的需求,您只能使用設備的寬度。

在「移動」與「桌面」中的響應思考是真正的限制,並導致一些混淆。移動應該指的是改變位置的設備。嘗試使用小型,中型和大型名稱來描述響應頁面的佈局(斷點)。

最後,沒有首選的方式做「響應」。。「每個站點都有它自己的需求需要得到滿足它是由你來學習儘可能多地和你的需求打造的首選方式

0

你總是可以使用:

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

在你的頭。然後,整個網站將調整大小以適合移動設備。

你所有的JS應該還是在移動設備上運行。這純粹是「快閃」那不會。

網站ISN」 t「響應」與此,但取決於網站和多少互動客戶需要的等等,有時這是足夠和簡單的?

相關問題