作者 謝恩銘易桃，公眾號(hào)「程序員聯(lián)盟」（微信號(hào)：coderhub）。
轉(zhuǎn)載請(qǐng)注明出處奥溺。
原文：http://www.reibang.com/p/93048eed45cb

《Web探索之旅》全系列

內(nèi)容簡(jiǎn)介

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

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

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

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

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

以前卷中，我們用手機(jī)最多是打電話，發(fā)短信渊抽，玩游戲蟆豫，很難得會(huì)在手機(jī)上瀏覽網(wǎng)頁。

可是自從觸屏技術(shù)開始流行后懒闷，大大提高了人們?cè)谑謾C(jī)和平板上“上網(wǎng)沖浪”的興趣十减。

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

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

• 優(yōu)化自己的網(wǎng)站，使之能夠適應(yīng)手機(jī)和平板的分辨率灵疮，在電腦上和移動(dòng)設(shè)備上呈現(xiàn)不一樣的效果织阅，不至于因?yàn)榉直媛实淖兓白冃巍薄Ｒ驗(yàn)樵陔娔X上瀏覽網(wǎng)頁震捣，和在手機(jī)和平板上看到的頁面是不一樣的荔棉。如果不經(jīng)過優(yōu)化闹炉，在電腦上看很正常的網(wǎng)頁，在手機(jī)和平板上會(huì)不全润樱，你要用手指去拖動(dòng)頁面看其他部分渣触；或者字很小，你要放大才能看壹若。

• 將自己的網(wǎng)站做成原生 app嗅钻。所謂原生 app，英語是 Native application店展。之所以叫“原生”养篓，是對(duì)應(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)站針對(duì)不同設(shè)備（電腦或移動(dòng)設(shè)備逝变，如手機(jī)，平板奋构，甚至智能手表）骨田，會(huì)自適應(yīng)分辨率，而且優(yōu)先顯示的內(nèi)容區(qū)塊也會(huì)不一樣声怔。

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

PC上

平板電腦上

手機(jī)上

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

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

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

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

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

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

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

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

Web app 的優(yōu)點(diǎn)

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

Web app 的缺點(diǎn)

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

原生 app 的優(yōu)點(diǎn)

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

原生 app 的缺點(diǎn)

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

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

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

大勢(shì)所趨售滤，我們還等什么呢√ㄊ快去開發(fā)一個(gè)屬于你自己的響應(yīng)式網(wǎng)站吧完箩，或者把你設(shè)計(jì)的網(wǎng)頁改成響應(yīng)式。

2. 總結(jié)

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

2. 響應(yīng)式設(shè)計(jì)秩彤，Web app 和原生 app：具體取用哪個(gè)方案，主要還是看你的業(yè)務(wù)規(guī)模事哭，預(yù)算和行業(yè)特點(diǎn)漫雷。這些解決方案可以在一起工作，相互補(bǔ)充鳍咱。為什么不能同時(shí)具有一個(gè) Web app 和一個(gè)原生 app降盹？或者你可以選擇一個(gè)響應(yīng)式網(wǎng)站，適應(yīng)臺(tái)式機(jī)流炕，平板電腦，手機(jī)仅胞。

3. 最好的解決方案是給你用戶一個(gè)最好的效果每辟。

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

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

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

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