手機(jī)和PC端分開(kāi)來(lái)寫，為了方便，下面簡(jiǎn)稱為PC和移動(dòng)分離。這個(gè)問(wèn)題我們之前在另外一篇文章中討論過(guò)，但是感覺(jué)還是不夠全面，所以從另外一個(gè)角度（偽前端？）再來(lái)深入探討一下。

 

在《打造高可用性的移動(dòng)產(chǎn)品》一文中，作者提到過(guò)：“移動(dòng)和桌面設(shè)計(jì)的差別遠(yuǎn)不止是布局問(wèn)題。只要有足夠的編程量，這些差別是可以通過(guò)響應(yīng)式設(shè)計(jì)來(lái)解決的。事實(shí)上，你可以認(rèn)為如果一種設(shè)計(jì)不能兼顧兩種平臺(tái)的主要差別，就不能算是合格的響應(yīng)式設(shè)計(jì)。但是，如果確實(shí)想要處理好平臺(tái)間的所有差異，我們就回到了原點(diǎn)：進(jìn)行兩種不同的設(shè)計(jì)。”

 

可見(jiàn)響應(yīng)式與移動(dòng)開(kāi)發(fā)不是硬幣的正反面。它們是為了解決同一個(gè)技術(shù)問(wèn)題而被創(chuàng)造出來(lái)，它們是同一種技術(shù)思想的分支延伸。

 

既然無(wú)情的回到了原點(diǎn)，我們先來(lái)看看我們當(dāng)初想要解決的問(wèn)題：“屏幕尺寸越來(lái)越多，不同設(shè)備的交互特質(zhì)也有著巨大的差別，我們希望我們的網(wǎng)站能夠在移動(dòng)手機(jī)、平板、桌面電腦，在鍵鼠、觸摸、無(wú)障礙設(shè)備上都有優(yōu)秀的用戶體驗(yàn)。所以，我們需要網(wǎng)站的用戶界面在不同的平臺(tái)上有所不同。”

 

響應(yīng)式設(shè)計(jì) (Responsive Web design)方案

 

目前普遍的認(rèn)知是，把主要依靠 CSS （主要是 Media Query，網(wǎng)格與Typography系統(tǒng)），輔以少量的JS，來(lái)對(duì)各種屏幕尺寸進(jìn)行響應(yīng)的做法，稱之為響應(yīng)式布局。

 

這種主要依靠CSS和少量JS的方案有很多優(yōu)點(diǎn)，比如：

看起來(lái)就是，大家都開(kāi)心，所以很多著名的開(kāi)源項(xiàng)目（例如：Bitwebcms、Bootstrap、Foundation）都進(jìn)行了跟進(jìn)。

 

但有些地方也并不是那么完美的：

 

 

假如你的網(wǎng)站（或者系統(tǒng)）在桌面和移動(dòng)上的功能和用戶體驗(yàn)幾乎一致，就像大部分的企業(yè)站網(wǎng)站、博客和信息展示網(wǎng)站，或者活動(dòng)、專題頁(yè)等偏重信息傳達(dá)而輕交互的網(wǎng)站，那么響應(yīng)式絕對(duì)是最佳解決方案。

但是（永遠(yuǎn)有個(gè)但是），如果我們很有錢，也很有時(shí)間，想要做更多的移動(dòng)端設(shè)計(jì)，比如減少信息層級(jí)、增強(qiáng)手勢(shì)操作、讓網(wǎng)頁(yè)更接近一個(gè)應(yīng)用程序？于是，為了更復(fù)雜的需求，為了我們的網(wǎng)站能更牛逼的匹配各個(gè)屏幕，聰明又勤勞的工程人員們又提出了這些解決方案：

 

RESS （Responsive Web Design with Server Side Components）翻譯過(guò)來(lái)就是通過(guò)服務(wù)器端組件的響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)，簡(jiǎn)單的說(shuō)，就是讓服務(wù)器后臺(tái)摻乎進(jìn)來(lái)。RESS的贊同者大都認(rèn)為基于前端的響應(yīng)式方案只是一種妥協(xié)和不徹底的行為。有大神總結(jié)到：“ UI 只是在很被動(dòng)的進(jìn)行「調(diào)整」，而不能真正達(dá)到各個(gè)平臺(tái)的最優(yōu)。好的設(shè)計(jì)應(yīng)該達(dá)到「這個(gè)設(shè)備該有的體驗(yàn)」（Device Experiences）。 ”服務(wù)器端的好處是服務(wù)器端為同一個(gè)URL動(dòng)態(tài)的生成不同的內(nèi)容：包括HTML，JS，CSS，甚至是字體和圖片等資源。這樣可以規(guī)避前端響應(yīng)帶來(lái)的執(zhí)行效率低下和頁(yè)面打開(kāi)速度慢的問(wèn)題。（我個(gè)人并不覺(jué)得太慢~）

 

 

有些人還在在 JS 中實(shí)現(xiàn)兩套邏輯，分別兼容桌面和移動(dòng)設(shè)備。通過(guò) UA、特性檢測(cè)在前端做設(shè)備判斷，對(duì)資源進(jìn)行異步加載，渲染不同模版，使用不同的業(yè)務(wù)邏輯，針對(duì)不同的平臺(tái)加載不同的UI和業(yè)務(wù)模塊等等……

 

 

那么現(xiàn)在，我們的網(wǎng)站可以更牛逼的 “響應(yīng)” 各個(gè)平臺(tái)了。然后悲劇發(fā)生了。您會(huì)發(fā)現(xiàn)，不怎么在乎成本的老板，也會(huì)向你開(kāi)始抱怨太慢。后端、前端和美工慢慢的開(kāi)始抱怨多了起來(lái)。大家又有了新的想法，我們?yōu)槭裁床桓纱喟岩苿?dòng)網(wǎng)站和桌面網(wǎng)站分開(kāi)到兩個(gè)系統(tǒng)中？如果你的需求真的都到這一步了，你的移動(dòng)網(wǎng)站已經(jīng)不是一個(gè)普通的網(wǎng)站了，也應(yīng)該可以被稱作 WebApp了。把移動(dòng)設(shè)備網(wǎng)站徹底分開(kāi)也許真的非常適合你。如果開(kāi)發(fā)資源足夠充足，咱們還可以讓專門的團(tuán)隊(duì)來(lái)維護(hù)專門移動(dòng)端的網(wǎng)站。（嗯，事實(shí)上，不差錢的BAT 就是這么干的）

 

于是又一個(gè)昂貴的概念誕生了，獨(dú)立的移動(dòng)版網(wǎng)站。不過(guò)，它真是那么獨(dú)立么？至少，是和桌面版用的同一個(gè)根域名吧。多數(shù)情況下，這個(gè)時(shí)候會(huì)需要使用到獨(dú)立的二級(jí)域名。那么問(wèn)題來(lái)了，難道我們要讓所有用戶在計(jì)算機(jī)上自覺(jué)訪問(wèn) http://taobao.com ，然后手機(jī)上都自覺(jué)訪問(wèn) http://m.taobao.com？所以，我們還是要根據(jù)訪問(wèn)設(shè)備做一次 “響應(yīng)”（設(shè)備檢測(cè)），然后進(jìn)行 URL 重定向，才能將不同設(shè)備的用戶帶到那個(gè)為他們準(zhǔn)備精心的那個(gè)網(wǎng)站。所以從根本上說(shuō)，手機(jī)和PC端分開(kāi)來(lái)寫，只是響應(yīng)式設(shè)計(jì)的一種再次的發(fā)展和延伸罷了。他們的界限沒(méi)有某些響應(yīng)式技術(shù)的黑粉眼中那么清晰，其實(shí)也不需要那么清晰。

 

如果不能兼顧兩種平臺(tái)的主要差別，就不是好的辦法，無(wú)論是響應(yīng)式還是PC和移動(dòng)分離。

 

這不是一個(gè)二選一的問(wèn)題，而是一個(gè)平衡度選擇