作者 谢恩铭，公众号「程序员联盟」（微信号：coderhub）。
转载请注明出处。
原文：https://www.jianshu.com/p/93048eed45cb
《Web探索之旅》全系列
内容简介
- 响应式网站和移动应用
- 总结
- 第三部分第一课预告
1. 响应式网站和移动应用
上一课 Web探索之旅 | 第二部分第四课：数据库 中，我们认识了关系型数据库和非关系型数据库。
在我们开始聊响应式网站之前，可以聊聊移动 app（app 是 application 的缩写，表示“应用”）。
自从触屏式手机和平板电脑开始流行起来后（多亏乔布斯推广了 iPhone），传统的网站和软件行业发生了翻天覆地的变化。
以前，我们用手机最多是打电话，发短信，玩游戏，很难得会在手机上浏览网页。
可是自从触屏技术开始流行后，大大提高了人们在手机和平板上“上网冲浪”的兴趣。
随着这样的潮流，不少知名软件推出了移动 app 版，不少知名网站也推出了对应的移动 app 版。
这时开发者们就有了两个选择：
- 优化自己的网站，使之能够适应手机和平板的分辨率，在电脑上和移动设备上呈现不一样的效果，不至于因为分辨率的变化而“变形”。因为在电脑上浏览网页，和在手机和平板上看到的页面是不一样的。如果不经过优化，在电脑上看很正常的网页，在手机和平板上会不全，你要用手指去拖动页面看其他部分；或者字很小，你要放大才能看。
- 将自己的网站做成原生 app。所谓原生 app，英语是 Native application。之所以叫“原生”，是对应它的操作系统说的，指安装在此操作系统上的应用程序。假如是 Android 系统，那么原生 app 一般使用 Java/Kotlin 语言开发，须要安装在 Android 操作系统里才能使用；iOS 系统，那么原生 app 就是使用 Objective-C/Swift 开发，须要安装在 iOS 操作系统里才能使用。
第一种方法就是响应式网站了，英语是 Responsive Website。响应，顾名思义就是说这样的网站针对不同设备（电脑或移动设备，如手机，平板，甚至智能手表），会自适应分辨率，而且优先显示的内容区块也会不一样。
比如我们来看一下我自己随便建的一个博客（响应式网站，没什么内容）在 PC（个人电脑），平板和手机上分别是如何的：
PC上
平板电脑上
手机上
看到了吗？响应式设计不仅会针对不同分辨率自适应大小，而且会对页面做调整，保证最佳的内容呈现。
当然了，除了响应式设计和原生 app，还有一种是 Web app（也叫 Mobile Website，移动网站），考虑平台的有限性和机遇，为移动设备专门设计的。
我们有时在移动设备上浏览网页时，可以看到弹出选项说“是否转到移动版本？”，这样的网页就是做了移动版本了。Web app 和响应式网站一样，也不需要安装在手机本地。
响应式网站，原生 app 和 Web app 各有优劣势：
响应式网站的优点
- 一个网站：适应所有设备，更容易管理。
- 一个 URL（可以简单理解为“网址”）：让你的用户在移动设备上更容易找到，而且不需要任何的重定向，这在较慢的网速下特别有用。
- 容易做搜索引擎优化：不需要为移动设备创建特定的内容，可以让移动设备使用桌面网站的搜索引擎优化的好处。
- 易于营销：网站在移动设备上显示，对于营销部门来说不需要增加额外的工作量。
- 成本低：简单的数学运算，一个网站比两个网站要便宜吧。
响应式网站的缺点
- 一个网站：让一个网站适配所有网站，对于你来说很容易，但不一定适合你的用户。你需要在同一个页面上展示不同的侧重点，以便使用该平台的最大优势，最大限度的提高你的转化率。
- 技术：响应式设计是一种较新的技术，在一些老的设备和浏览器中加载页面速度过慢，甚至是完全不支持。
- 用户体验：移动端和 PC 机上的用户体验是完全不同的。所以一个网，甚至是响应式设计，在两个平台上都会损害你整体的 UX（User Experience 的缩写，表示“用户体验”）。如果你试图使用相同的界面来满足移动和桌面的两个平台的用户使用，到最后可能谁都无法满足。
Web app 的优点
- 用户体验：你有一个网站，是专门为移动设备创建的，考虑到平台的所有优点和局限性，有不错的用户体验。
- 速度：你的网站在移动平台上加载更快，更轻松。
- 成本：相对于响应式设计，创建一个移动网站并不便宜。
- 立即访问：虽然比响应式设计没有额外的好处，但对于一个需要下载安装的原生 app，仍然发挥着它的作用。
Web app 的缺点
- 多个 URL：你的用户必须记住两个 URL，或以其他的方式重定向到移动网站，这需要几秒钟的时间。而且移动网站还需要为 SEO 做额外的工作。例如：http://www.chinaz.com 是站长之家的主站域名，它的移动网站的域名是：http://m.chinaz.com 。
- 维护：你必须得维护两个网站。
- 没有普遍的一致性：你必须考虑到，有两种不同类型的移动设备：触摸屏和键盘导航。一个单一的移动网以不同的方式在所有类型设备上工作。
原生 app 的优点
- 用户体验：Native app 比任何移动优化方案都具有更好的用户体验。亲儿子，就是不一样。原生态，健康品。
- 辅助功能和速度：应用程序可以运行，即使没有连接网络也可以访问你的所有信息。如果你足够幸运，拥有一支丰富的团队和良好的编码器，你的运用程序可以加载得更快，更顺利。
- 可见性：一旦用户在移动设备上安装了，它就一直会显示在菜单中或在桌面上有一个独特的图标。
原生 app 的缺点
- 不能在所有设备上访问：你的应用程序建立在一个特定的操作系统中，这意味着 iOS 系统上的应用不能在别的设备上访问。
- 不具灵活性：所有的应用程序更新都必须通过应用程序商店（例如苹果的 App Store 和谷歌的 Google Play），每次提交都得获得批准，这有可能需要长达几个星期的时间。而且不是每个用户都很乐意于频繁的更新，有些人会一直使用旧的版本。
- 成本高：原生 app 的开发显然是众多解决方案中最贵的一种。
- 营销和搜索引擎优化：需要一个完全不同的营销策略来推广你的应用程序，你需要专业的移动营销人员帮忙。
看了上述方案的优缺点对比，你是否对于选择哪一种心里有底了呢？
值得一提的是，目前移动设备使用率越来越高，所以大部分网站都已纷纷做了响应式设计。
大势所趋，我们还等什么呢。快去开发一个属于你自己的响应式网站吧，或者把你设计的网页改成响应式。
2. 总结
响应式设计：Responsive Web design。使得网站可以自适应屏幕大小，在电脑，平板和手机上呈现方式不一样。
响应式设计，Web app 和原生 app：具体取用哪个方案，主要还是看你的业务规模，预算和行业特点。这些解决方案可以在一起工作，相互补充。为什么不能同时具有一个 Web app 和一个原生 app？或者你可以选择一个响应式网站，适应台式机，平板电脑，手机。
最好的解决方案是给你用户一个最好的效果。
3. 第三部分第一课预告
今天的课就到这里，一起加油吧！
我是 谢恩铭，公众号「程序员联盟」（微信号：coderhub）运营者，慕课网精英讲师 Oscar 老师，终生学习者。
热爱生活，喜欢游泳，略懂烹饪。
人生格言：「向着标杆直跑」
