作者 謝恩銘，公眾號「程序員聯(lián)盟」（微信號：coderhub）。
轉(zhuǎn)載請注明出處。
原文：http://www.itdecent.cn/p/93048eed45cb

《Web探索之旅》全系列

內(nèi)容簡介

1. 響應(yīng)式網(wǎng)站和移動應(yīng)用
2. 總結(jié)
3. 第三部分第一課預(yù)告

1. 響應(yīng)式網(wǎng)站和移動應(yīng)用

上一課 Web探索之旅 | 第二部分第四課：數(shù)據(jù)庫 中，我們認識了關(guān)系型數(shù)據(jù)庫和非關(guān)系型數(shù)據(jù)庫。

在我們開始聊響應(yīng)式網(wǎng)站之前，可以聊聊移動 app（app 是 application 的縮寫，表示“應(yīng)用”）。

自從觸屏式手機和平板電腦開始流行起來后（多虧喬布斯推廣了 iPhone），傳統(tǒng)的網(wǎng)站和軟件行業(yè)發(fā)生了翻天覆地的變化。

以前，我們用手機最多是打電話，發(fā)短信，玩游戲，很難得會在手機上瀏覽網(wǎng)頁。

可是自從觸屏技術(shù)開始流行后，大大提高了人們在手機和平板上“上網(wǎng)沖浪”的興趣。

隨著這樣的潮流，不少知名軟件推出了移動 app 版，不少知名網(wǎng)站也推出了對應(yīng)的移動 app 版。

這時開發(fā)者們就有了兩個選擇：

• 優(yōu)化自己的網(wǎng)站，使之能夠適應(yīng)手機和平板的分辨率，在電腦上和移動設(shè)備上呈現(xiàn)不一樣的效果，不至于因為分辨率的變化而“變形”。因為在電腦上瀏覽網(wǎng)頁，和在手機和平板上看到的頁面是不一樣的。如果不經(jīng)過優(yōu)化，在電腦上看很正常的網(wǎng)頁，在手機和平板上會不全，你要用手指去拖動頁面看其他部分；或者字很小，你要放大才能看。

• 將自己的網(wǎng)站做成原生 app。所謂原生 app，英語是 Native application。之所以叫“原生”，是對應(yīng)它的操作系統(tǒng)說的，指安裝在此操作系統(tǒng)上的應(yīng)用程序。假如是 Android 系統(tǒng)，那么原生 app 一般使用 Java/Kotlin 語言開發(fā)，須要安裝在 Android 操作系統(tǒng)里才能使用；iOS 系統(tǒng)，那么原生 app 就是使用 Objective-C/Swift 開發(fā)，須要安裝在 iOS 操作系統(tǒng)里才能使用。

第一種方法就是響應(yīng)式網(wǎng)站了，英語是 Responsive Website。響應(yīng)，顧名思義就是說這樣的網(wǎng)站針對不同設(shè)備（電腦或移動設(shè)備，如手機，平板，甚至智能手表），會自適應(yīng)分辨率，而且優(yōu)先顯示的內(nèi)容區(qū)塊也會不一樣。

比如我們來看一下我自己隨便建的一個博客（響應(yīng)式網(wǎng)站，沒什么內(nèi)容）在 PC（個人電腦），平板和手機上分別是如何的：

PC上

平板電腦上

手機上

看到了嗎？響應(yīng)式設(shè)計不僅會針對不同分辨率自適應(yīng)大小，而且會對頁面做調(diào)整，保證最佳的內(nèi)容呈現(xiàn)。

當(dāng)然了，除了響應(yīng)式設(shè)計和原生 app，還有一種是 Web app（也叫 Mobile Website，移動網(wǎng)站），考慮平臺的有限性和機遇，為移動設(shè)備專門設(shè)計的。

我們有時在移動設(shè)備上瀏覽網(wǎng)頁時，可以看到彈出選項說“是否轉(zhuǎn)到移動版本？”，這樣的網(wǎng)頁就是做了移動版本了。Web app 和響應(yīng)式網(wǎng)站一樣，也不需要安裝在手機本地。

響應(yīng)式網(wǎng)站，原生 app 和 Web app 各有優(yōu)劣勢：

響應(yīng)式網(wǎng)站的優(yōu)點

1. 一個網(wǎng)站：適應(yīng)所有設(shè)備，更容易管理。
2. 一個 URL（可以簡單理解為“網(wǎng)址”）：讓你的用戶在移動設(shè)備上更容易找到，而且不需要任何的重定向，這在較慢的網(wǎng)速下特別有用。
3. 容易做搜索引擎優(yōu)化：不需要為移動設(shè)備創(chuàng)建特定的內(nèi)容，可以讓移動設(shè)備使用桌面網(wǎng)站的搜索引擎優(yōu)化的好處。
4. 易于營銷：網(wǎng)站在移動設(shè)備上顯示，對于營銷部門來說不需要增加額外的工作量。
5. 成本低：簡單的數(shù)學(xué)運算，一個網(wǎng)站比兩個網(wǎng)站要便宜吧。

響應(yīng)式網(wǎng)站的缺點

1. 一個網(wǎng)站：讓一個網(wǎng)站適配所有網(wǎng)站，對于你來說很容易，但不一定適合你的用戶。你需要在同一個頁面上展示不同的側(cè)重點，以便使用該平臺的最大優(yōu)勢，最大限度的提高你的轉(zhuǎn)化率。
2. 技術(shù)：響應(yīng)式設(shè)計是一種較新的技術(shù)，在一些老的設(shè)備和瀏覽器中加載頁面速度過慢，甚至是完全不支持。
3. 用戶體驗：移動端和 PC 機上的用戶體驗是完全不同的。所以一個網(wǎng)，甚至是響應(yīng)式設(shè)計，在兩個平臺上都會損害你整體的 UX（User Experience 的縮寫，表示“用戶體驗”）。如果你試圖使用相同的界面來滿足移動和桌面的兩個平臺的用戶使用，到最后可能誰都無法滿足。

Web app 的優(yōu)點

1. 用戶體驗：你有一個網(wǎng)站，是專門為移動設(shè)備創(chuàng)建的，考慮到平臺的所有優(yōu)點和局限性，有不錯的用戶體驗。
2. 速度：你的網(wǎng)站在移動平臺上加載更快，更輕松。
3. 成本：相對于響應(yīng)式設(shè)計，創(chuàng)建一個移動網(wǎng)站并不便宜。
4. 立即訪問：雖然比響應(yīng)式設(shè)計沒有額外的好處，但對于一個需要下載安裝的原生 app，仍然發(fā)揮著它的作用。

Web app 的缺點

1. 多個 URL：你的用戶必須記住兩個 URL，或以其他的方式重定向到移動網(wǎng)站，這需要幾秒鐘的時間。而且移動網(wǎng)站還需要為 SEO 做額外的工作。例如：http://www.chinaz.com 是站長之家的主站域名，它的移動網(wǎng)站的域名是：http://m.chinaz.com 。
2. 維護：你必須得維護兩個網(wǎng)站。
3. 沒有普遍的一致性：你必須考慮到，有兩種不同類型的移動設(shè)備：觸摸屏和鍵盤導(dǎo)航。一個單一的移動網(wǎng)以不同的方式在所有類型設(shè)備上工作。

原生 app 的優(yōu)點

1. 用戶體驗：Native app 比任何移動優(yōu)化方案都具有更好的用戶體驗。親兒子，就是不一樣。原生態(tài)，健康品。
2. 輔助功能和速度：應(yīng)用程序可以運行，即使沒有連接網(wǎng)絡(luò)也可以訪問你的所有信息。如果你足夠幸運，擁有一支豐富的團隊和良好的編碼器，你的運用程序可以加載得更快，更順利。
3. 可見性：一旦用戶在移動設(shè)備上安裝了，它就一直會顯示在菜單中或在桌面上有一個獨特的圖標。

原生 app 的缺點

1. 不能在所有設(shè)備上訪問：你的應(yīng)用程序建立在一個特定的操作系統(tǒng)中，這意味著 iOS 系統(tǒng)上的應(yīng)用不能在別的設(shè)備上訪問。
2. 不具靈活性：所有的應(yīng)用程序更新都必須通過應(yīng)用程序商店（例如蘋果的 App Store 和谷歌的 Google Play），每次提交都得獲得批準，這有可能需要長達幾個星期的時間。而且不是每個用戶都很樂意于頻繁的更新，有些人會一直使用舊的版本。
3. 成本高：原生 app 的開發(fā)顯然是眾多解決方案中最貴的一種。
4. 營銷和搜索引擎優(yōu)化：需要一個完全不同的營銷策略來推廣你的應(yīng)用程序，你需要專業(yè)的移動營銷人員幫忙。

看了上述方案的優(yōu)缺點對比，你是否對于選擇哪一種心里有底了呢？

值得一提的是，目前移動設(shè)備使用率越來越高，所以大部分網(wǎng)站都已紛紛做了響應(yīng)式設(shè)計。

大勢所趨，我們還等什么呢?？烊ラ_發(fā)一個屬于你自己的響應(yīng)式網(wǎng)站吧，或者把你設(shè)計的網(wǎng)頁改成響應(yīng)式。

2. 總結(jié)

1. 響應(yīng)式設(shè)計：Responsive Web design。使得網(wǎng)站可以自適應(yīng)屏幕大小，在電腦，平板和手機上呈現(xiàn)方式不一樣。

2. 響應(yīng)式設(shè)計，Web app 和原生 app：具體取用哪個方案，主要還是看你的業(yè)務(wù)規(guī)模，預(yù)算和行業(yè)特點。這些解決方案可以在一起工作，相互補充。為什么不能同時具有一個 Web app 和一個原生 app？或者你可以選擇一個響應(yīng)式網(wǎng)站，適應(yīng)臺式機，平板電腦，手機。

3. 最好的解決方案是給你用戶一個最好的效果。

3. 第三部分第一課預(yù)告

今天的課就到這里，一起加油吧！

下一課：Web探索之旅 | 第三部分第一課：服務(wù)器

我是 謝恩銘，公眾號「程序員聯(lián)盟」（微信號：coderhub）運營者，慕課網(wǎng)精英講師 Oscar 老師，終生學(xué)習(xí)者。
熱愛生活，喜歡游泳，略懂烹飪。
人生格言：「向著標桿直跑」