電腦登入 Line 或是 FB Messenger 時，打開朋友傳過來的連結，卻發(fā)現(xiàn)解析度很低，還只用到一點點螢幕顯示區(qū)塊，看起來就跟在手機上瀏覽時一樣的經(jīng)驗呢？（通常都是你朋友們手機傳來的?。?/span>
若是能仔細看一下連結，非常有可能在 https:// 後面，都會看到「 m. 」的網(wǎng)址形式。代表點擊進去，將會是瀏覽「手機版」網(wǎng)站，而非 RWD 響應式網(wǎng)頁設計的網(wǎng)站。
左邊是 FB 行動版，右邊則是購物網(wǎng)站行動版
手機版網(wǎng)頁－過渡產(chǎn)物
手機版網(wǎng)頁是在 RWD 設計尚未普及時的趨勢主流，在 iPhone 4 左右的年代（嘿嘿，用手機型號當做一個年代忠實的反映出手機不管在大小、速度、性能上，給人類的改變有多大），當時還有流行過一波「人人都做 App 」的時代，但隨著 Html 5 與 css 的完整性慢慢提升、各大瀏覽器已禁用速度緩慢的 flash ，漸漸地，響應式網(wǎng)站設計以：「內(nèi)容為水」（ Content is Water ）的核心概念崛起，在現(xiàn)在早已成為網(wǎng)頁設計的標準配備。
現(xiàn)在仍有許多「大型網(wǎng)站」仍使用「手機版網(wǎng)頁」的設置，不過都會有些特別的前提，像是蘋果日報（資訊量大且許多人使用手機瀏覽）、臉書 Facebook （但許多人手機裡都有 Facebook 的 App ）、大型購物平臺網(wǎng)站（近來也慢慢整合 App 、會員機制，希望的就是消費者黏著度更高，像是東森購物、蝦皮等等）。
手機版網(wǎng)頁可說是彈性切版問世之前的折衷選擇，憑伺服器自動判斷顯示螢幕的解析度（ breakpoint ），使得進到網(wǎng)頁的使用者自動切換成手機版瀏覽，的確是當時因應手機螢幕發(fā)展還存著許多變數(shù)，螢幕解析度紊亂的折衷選擇。
相信許多企業(yè)也在當時可能找過 App 開發(fā)商，或者設計過手機版網(wǎng)頁，但隨著 2011 年後， RWD 被廣為人知，Google 於 2015 年正式宣布行動裝置的年代到來（Mobilegeddon），更讓一波波網(wǎng)站改版實現(xiàn)。
內(nèi)容為水的概念，就說明內(nèi)容依照載具變化，是形容 RWD 最好的比喻（來源）
手機網(wǎng)頁與 RWD 網(wǎng)頁優(yōu)劣比較
好的手機版網(wǎng)頁，會做的與電腦版有相同的品牌識別，並且針對手機操作的 UI 優(yōu)化。但是不好的手機版網(wǎng)頁設計，往往讓使用者彷彿進到一個新的網(wǎng)頁，動線和使用情境與原本的電腦版網(wǎng)頁差距甚大，甚至會有找不到資料、需求無法被滿足的情況，這就不是企業(yè)所樂見的。
不可避免的，建立了第二個網(wǎng)站，就需要人力來維運（沒錯，手機版網(wǎng)頁維護通常視作另一個網(wǎng)站）。確認文章是否有更新、產(chǎn)品上架時是否兩邊一致、有無錯誤連結的頁面等等，都會是維護另一個手機版網(wǎng)站的繁雜工序。這些步驟當然可藉由程式來簡化，但還是比不上在網(wǎng)頁設計之初，即採用 RWD 的設計來的簡單、直覺。
另一個手機版網(wǎng)頁的重大缺點，即是不利於 SEO 和網(wǎng)域的名聲累積。對於搜尋引擎來說，手機版網(wǎng)頁與電腦版會視作兩個不同的網(wǎng)頁，當使用者搜尋某一關鍵字時，Google 會針對可能的瀏覽時間、與頁面互動的情況來判斷排名，有可能完全搜尋不出其一的網(wǎng)站內(nèi)容，最差的情況還有可能變成「重複內(nèi)容」，導致網(wǎng)站成為 Google 的黑名單。（此情況是可以避免的，後續(xù)將有文章提及。）
什麼網(wǎng)站可能需要「手機版」的設計
? 網(wǎng)站資訊量極大，像是新聞、資訊匯集站。舉裡來說，像是各大新聞網(wǎng)、大型入口網(wǎng)站。但採用這樣的作法，也要大到不是很在意 SEO 和已經(jīng)壟斷某種程度的流量了。
? 商品繁多之購物型網(wǎng)站。若你是屬於像是 momo 購物、樂天這樣的購物平臺網(wǎng)站，因期分層、商品種類繁多，有時候需要針對手機的使用者經(jīng)驗重新規(guī)劃，手機版或是 App 都會是解決之道，還可以搭配各種會員的玩法來增加回購等電商指標。（若商品品項不多的中小型電商，WordPress 內(nèi)建許多模版，都可以達到很好的 RWD 效果了！）
? 不管電腦版啦！有些網(wǎng)站因為性質(zhì)，可能是短期活動，可能是瀏覽者僅有 10% 以下使用電腦瀏覽。那麼就乾脆做一個手機專屬的網(wǎng)站，此時也不用特別稱作「手機版」，而是：「我的網(wǎng)頁就是長這樣！」
RWD 身為標準配備，你怎麼能夠不認識他
響應式網(wǎng)頁設計，英文全名是 Responsive Web Design，維基百科上的定義為：『 RWD 是一種網(wǎng)頁設計的技術做法，該設計可使網(wǎng)站在不同的裝置（從桌面電腦顯示器到行動電話或其他行動產(chǎn)品裝置）上瀏覽時對應不同解析度皆有適合的呈現(xiàn)，減少使用者進行縮放、平移和捲動等操作行為?！?/p>
以 WordPress 模版建置來說，現(xiàn)在幾乎所有模版都包含了 RWD 的設置，只是隨著每一次切版，調(diào)整欄位，在某些解析度的呈現(xiàn)上，慢慢失去預設完美的樣式。對於沒有工程背景的客戶來說，無論找有經(jīng)驗的網(wǎng)頁設計公司，或是對於網(wǎng)頁技術了解的 freelancer ，都能在模版的基礎下順利修改，以達到 RWD 版型的宗旨：「 Mobile First 」 ，來呈現(xiàn)品牌在網(wǎng)路的最大門面！
網(wǎng)站能否在手機上正確顯示，已成為主流
（圖為 CTK Pro 作品）
