编者注:本文由我们的编辑团队于22年8月31日更新. 它已被修改，以包括最近的来源，并与我们目前的编辑标准保持一致.

There are 7.根据最近的一项研究，全球有750亿人口，其中超过60亿人使用智能手机 Statista study. 随着移动计算越来越独特的性质, 移动web开发领域更为重要 web development than ever before.

作为移动设备用户, 没有什么比设计糟糕的手机网页应用或原生应用更令人沮丧和难以操作的了.

And as a 移动应用开发者, 没有什么比支持尽可能多的移动客户端更具有挑战性的了, 每一种都有自己的特点. 是否选择开发移动网站, native, or hybrid app, 支持多种移动浏览器和更奇特的设备——以及处理各种平台——可能是一种相当痛苦的体验.

作为移动设备用户, 没有什么比设计糟糕的移动网页或原生应用更令人沮丧和难以驾驭的了. 作为一名移动应用开发者, 没有什么比支持尽可能多的移动客户端更具有挑战性的了, 每一种都有自己的特点.

Of course, 如今，网页和移动应用开发越来越融合, 现在并不是每个开发者都需要担心支持移动客户端. 但是，移动设备和应用程序日益普及的本质强烈表明，那些今天不需要支持移动客户端的人，很可能在不久的将来需要这样做. 所以如果你还没有考虑过手机应用开发，你应该考虑一下.

Mobile Web App vs. Native App vs. Hybrid App

大多数技术选择都是如此, 当谈到要开发的手机应用类型时，没有一个放之四海而皆准的答案. 有很多 Web应用程序最佳实践 要考虑的是，并非所有这些都是技术性的. 你的目标受众是谁? 他们是更喜欢手机网页应用还是原生应用? 原生应用和混合应用的区别是什么? 你们有哪些开发资源，他们最熟悉哪些移动技术? 你为你的产品设想的授权和销售模式是什么?

一般来说(尽管总是有例外), 移动web应用程序路由比本地移动应用程序路由更快、更便宜, 特别是当目标是支持广泛的设备时. Conversely, 移动设备的某些原生功能(游戏邦注:如移动传感器等)可能对你的应用很重要，但却只能通过原生应用访问(这将导致你无法选择移动网页应用)。.

超越了传统的网页应用和原生应用的问题, 混合型移动应用可能是你的正确选择, 取决于您的需求和资源限制. Hybrid apps, like native apps, 运行在设备本身(而不是在浏览器中)，但使用web技术(HTML5)编写, CSS, 和JavaScript)，通常由混合应用程序框架支撑. More specifically, 混合应用程序在本地容器中运行，并利用设备的浏览器引擎(而不是浏览器)在本地渲染HTML和处理JavaScript. web到本机抽象层允许访问移动web应用程序中无法访问的设备功能, 比如加速度计, camera, and local storage.

但无论你做什么选择，无论是移动网络应用, a native app, 或者是一款混合应用——仔细研究并确认你的假设. As an example, 为了这个移动web开发教程的目的, 你可能已经决定为电子商务开发一个本地移动应用程序来销售你的产品. However, 50% 智能手机用户仍然更倾向于使用手机网站，而不是下载应用——这取决于你的目标市场, 这个数字可能会更大.

但无论你做什么选择，无论是移动网络应用, a native app, 或者是一款混合应用——仔细研究并确认你的假设.

当然，还有时间和预算方面的实际考虑. 正如我最喜欢的一句话所说， “更快、更好、更便宜:任选两个。.” 而上市时间和成本限制在web应用程序开发中是至关重要的, 在这个过程中，不要在质量上做出太大的妥协，这一点至关重要. 对于初次体验不佳的用户来说，要恢复他们的信心是相当困难的.

Indeed, mobile web, native, 混合应用都是完全不同的东西, 每个人都有自己独特的优势和挑战. 本教程重点介绍在高功能开发中要使用的方法和工具，以及要避免的陷阱, intuitive, 以及易于使用的移动web应用程序.

移动Web开发需要详细的规划

确定你(或你的客户)的需求是应用开发中最基本的最佳实践之一, 不仅仅是web应用开发. 仔细研究目标功能，以确定它们是否可以在你的移动web应用中实现. 当您已经投入了时间和资源来设计基于web的界面和支持基础设施时，如果意识到您的一个或多个基本客户端功能不受支持，这是非常低效的.

手机网页应用开发新手常遇到的另一个问题是，他们认为桌面浏览器的网页代码在手机浏览器中也能“原样”运行. This is not true. 两者之间肯定存在差异，如果你没有意识到，它们肯定会咬你一口. The HTML5 例如，Tag的自动播放功能就不能在移动浏览器上运行. 类似地，CSS transition and opacity 现在大多数移动浏览器都不支持属性(或者至少不始终支持). 移动平台上的一些web API方法也会出现问题, 比如SoundCloud音乐流媒体API，它需要Adobe Flash, 哪些是大多数移动设备不支持的.

对于手机网页应用开发新手来说，一个常见的误区是认为桌面浏览器的网页代码可以在手机浏览器中“原样”运行.

开发移动网页应用的一个特别复杂的因素是，移动设备的寿命往往比桌面显示器短得多(在美国，手机的平均寿命约为10年) 30 months). 这些更短的设备寿命, 伴随着新的移动设备和技术的不断发布, 产生不断变化的目标设备景观. 虽然在浏览器中工作可以通过屏蔽一些特定于设备的问题来一定程度上缓解这个问题, 您仍然需要设计一个支持多种屏幕分辨率的基于浏览器的视图, 以及适当调整横向和纵向方向.

我们还需要考虑支持苹果的Retina显示屏(液晶显示屏的像素密度如此之高，以至于人眼无法在典型的观看距离内识别单个像素)。. 几款苹果产品, 包括iPhone, iPod Touch, iPad, MacBook Pro, iPad Mini, and iPad Air, 提供Retina显示屏. 尤其是在针对移动设备优化网页应用时, 重要的是要意识到视网膜显示器产生的是低分辨率图像, 哪些是典型的移动设备服务, 看起来模糊和像素化可能发生. In these cases, 最好的应用开发解决方案是让服务器认识到请求来自Retina设备，并向客户端提供替代的更高分辨率图像.

如果你想使用一些很酷的HTML5的东西, 记住要事先验证你所寻找的功能是否在你的客户可能使用的设备中得到支持. 例如，在iOS 6及以上版本中，不支持导航器 getUserMedia 功能，因为相机只能通过本地应用程序访问. 查看特定设备和浏览器支持的内容有两个很好的资源 caniuse.com and html5test.com.

记住要事先验证你所寻找的功能是否在你的客户可能使用的设备中得到支持.

CSS3媒体查询还可以帮助您为每个设备提供定制的内容. 下面是一些用于捕获不同设备特征的示例代码, 比如像素密度, screen resolution, and orientation:

/*低于700像素的分辨率*/
@media (max-width: 700px) { ... }
/*与上一个相同，但设备的方向在横向*/
@media (max-width: 700px) and (orientation:横向){ ... }
/*包括宽度和方向，你可以添加一个媒体类型子句，
   在本例中是'tv' */
@media TV and (min-width: 700px) and (orientation:横向){ ... }
/*低分辨率显示与背景图像*/
.image {
    背景图片:url(/道路/ /我/形象.png);
    Background-size: 200px;
    height: 300px;
    width: 200px;
}
/*用于高分辨率(视网膜)显示背景图像*/
@media only screen and (min- moz-device-pixel-ratio: 2)，
只有屏幕和(- 0 -min-device-pixel-ratio: 2/1)，
只有屏幕和(-webkit-min-device-pixel-ratio: 2)，
只有屏幕和(min-device-pixel-ratio: 2) {
    -repeat;
        Background-size: 200px;
    /*其余的样式... */
    }
}

优化移动Web应用程序的性能

“天哪，这东西太慢了!” 作为一名移动网页开发者, 这可能是你最不想从你的用户那里听到的话. Therefore, 您必须仔细考虑如何减少和优化每个字节和服务器传输，以减少用户的等待时间. 期望传输总是在Wi-Fi网络上进行是不现实的, 你应该知道 53% 如果加载时间超过3秒，大多数移动站点访问都会被放弃. 同样值得注意的是，搜索引擎将加载时间作为计算页面质量分数的一部分.

如果加载时间超过3秒，53%的手机网站访问会被放弃, 搜索引擎在计算页面质量分数时会考虑加载时间.

作为本移动web开发教程的一部分, 这里有一些技巧可以帮助优化你的移动web应用程序的性能和最小化延迟:

• 图像优化. 众所周知，图像加载时间是影响移动设备页面加载的最大性能问题之一. 使用在线图像优化器，如 Kraken.io，可以帮助解决这个问题.
• Code compression. 压缩JavaScript和CSS文件, 取决于您拥有的代码数量, 是否会对性能产生重大影响.
• Database queries. 一些移动设备浏览器不像桌面浏览器那样接受那么多的cookie, 这可能导致需要执行比平时更多的查询. 因此，在支持移动web应用程序客户端时，服务器端缓存尤为重要. 记住使用适当的过滤器来阻止SQL查询注入，否则会危及站点和服务器的安全性.
• 内容分发网络(CDN). 如果你打算提供大量的视频, images, audio files, 或者其他类型的媒体, 强烈建议使用CDN. 一些比较常见的商业cdn包括 Amazon S3, Microsoft Azure, and MaxCDN. 使用CDN的优点很多，包括:
  • 提高下载性能. 利用CDN的资源可以分配负载、节省带宽和提高性能. 更好的cdn提供更高的可用性、更低的网络延迟和更低的数据包丢失. Moreover, 许多cdn提供全球分布的数据中心选择, 允许从离用户位置更近的服务器进行下载(减少网络跳数，加快下载速度).
  • 更多的并发下载. 浏览器通常限制单个域的并发连接数, 之后，其他下载将被阻止，直到之前的一个下载完成. 当从同一个站点下载许多大文件时，您经常会看到这个限制. 每个额外的CDN(在不同的域中)允许额外的并发下载.
  • 增强的分析. 许多商业cdn提供使用报告，可以补充您自己的网站分析，并可能提供更好的视频观看和下载的量化. GTmetrix, for example, 有一个优秀的网站报告工具来监控和优化网站上加载的资源吗.

开发移动Web应用程序的工具

“用合适的工具做合适的工作” 这是一句古老的格言，适用于软件开发和其他任何领域. 本教程提供并介绍了一些更流行和广泛使用的移动web开发工具, 但请记住，很可能还有其他工具是开发移动网页应用的“正确”工具, 这取决于您的需求和可用资源.

JavaScript移动Web应用框架

由于移动web开发往往会产生许多相同的共同挑战, 例如跨浏览器兼容性以及移动浏览器中不一致的HTML和CSS, 框架已经开发出来(基于HTML5和CSS3)，专门用于解决这些问题，并在各种智能手机和平板电脑上尽可能完美地工作. 大多数移动web应用框架都是轻量级的, 这有助于促进快速移动网页浏览，而不影响您的网站的外观和感觉.

拓宽我们的视野，超越手机领域, 如果有一个流行的JavaScript框架值得一提的话, it is jQuery. 如果您熟悉桌面版本，我建议您尝试一下 jQuery Mobile 为您的移动web应用程序. (注意:jQuery Mobile有 最近已弃用.)它有一个小部件库，可以将语义标记转换为手势友好的格式, 使操作更容易在触摸屏上. 最新版本包含一个轻量级的代码库，其中包含大量图形元素，可以真正改善您的UI.

另一个选择, Sencha Touch的市场份额也在迅速增加. 它提供了出色的整体性能，并帮助创建了一个外观和感觉都很像本地web用户界面的移动web用户界面. 它的全功能小部件库是基于Sencha的 ExtJS JavaScript库. (注意:Sencha Touch已与ExtJS合并.)

以下是比较jQuery Mobile和Sencha Touch时需要考虑的一些关键差异:

• Look and feel. 一般来说, Sencha Touch应用程序的外观和感觉比jQuery移动应用程序更清晰，更优越, 但重要的是要记住，这样的反应往往是高度主观的.
• Extensibility. jQuery Mobile提供了许多第三方扩展，其设计本身就是高度可扩展的, 而Sencha Touch更像是一个“封闭”的框架.
• Device support. 比起Sencha Touch, jQuery Mobile瞄准的是更大范围的设备.
• HTML与JavaScript. jQuery很大程度上是以html为中心的.e., 在JavaScript中扩展和操作现有的HTML), 而Sencha Touch编码则完全基于javascript. (这是一个例子, incidentally, 为什么在选择技术时考虑开发团队的技能是很重要的.)
• 外部依赖关系. jQuery Mobile需要jQuery和jQuery UI来进行DOM操作, 而Sencha Touch没有外部依赖.
• Learning curve. 大多数开发人员发现，使用jQuery的入门时间比Sencha Touch要短, 可能是由于大部分web开发人员已经熟悉标准的jQuery库.

响应式框架和移动Web应用程序

有许多响应式框架可用，其中两个是目前最流行的 Bootstrap and Foundation. 简而言之，响应式框架简化和流线化 基于web的响应式UI设计 and implementation, 封装最常见的布局和UI范例到一个可重用的, performance-optimized框架. 主要基于CSS和JavaScript, 其中许多框架都是开源的, free to download, 并且易于定制. 除非你有一组非常特殊的需求, 使用这些框架中的一个很可能会减少设计和实现移动web应用程序所需的工作量.

检查两个主要选项, 入门和基础, 需要考虑的一些关键差异包括:

• 目标平台. 而Bootstrap确实支持手机, tablet, 桌面设备, 它主要面向桌面使用. 另一方面，Foundation是为各种屏幕尺寸和类型而设计的.
• 浏览器兼容性. Bootstrap和Foundation都支持大多数浏览器的最新版本.
• 布局和组件的多样性. Bootstrap比Foundation提供的UI元素集合大得多.
• Auto-resizing. With Foundation, 网格根据当前浏览器的高度和宽度收缩和拉伸, 而Bootstrap只支持基于一组标准屏幕尺寸的预先定义的网格大小.

调试和测试移动Web应用程序

调试移动web应用程序可能很棘手，甚至有些令人沮丧, 特别是当您需要在不同的设备上进行测试或为目标客户机平台的模拟(通常不完美)安装sdk时.

In this context, 移动web应用程序开发的一个明显优势(与本地应用程序开发相比)是，您可以利用标准的基于浏览器的开发人员工具来调试应用程序. 基于我个人对远程调试的偏好, 我在这个应用程序开发教程中推荐的是Chrome及其DevTools. 其他标准的web开发选项包括Firefox与Firebug或Opera的Dragonfly工具.

我更喜欢的一些原因 Chrome及其DevTools include:

• 移动模拟器在Chrome的DevTools. 这可能是选择Chrome调试移动web应用程序的充分理由. 主要功能包括触摸事件的仿真, 用户代理欺骗, 网络带宽限制, 地理位置覆盖, 设备方向覆盖, 和CSS媒体类型仿真.
• 交互式编辑器. 允许动态编辑JavaScript或CSS.
• 高级JavaScript调试器. 允许DOM断点，并提供分析JavaScript代码执行时间的能力.
• 内置JSON和XML查看器. 避免需要任何插件来检查服务器响应.
• 支持Android调试桥(ADB)协议直接通过USB. 简化远程调试会话的实例化.
• 资源动态检查. 允许你检查应用的本地数据源, 包括IndexedDB或Web SQL数据库, 本地和会话存储, cookies, 和应用程序缓存资源. 您还可以快速检查应用程序的可视化资源, including images, fonts, and style sheets.

测试网页应用的布局和跨浏览兼容性, 你也可以使用一些有用的在线工具, such as BrowserStack. 只需输入应用程序的URL并选择浏览器, version, 操作系统, 您将在该环境中获得站点的模拟视图(和加载速度). 用于此目的的另一个有用工具是 BitBar.

选择智能移动开发解决方案

随着数量的不断迅速扩大, variety, 以及当今市场上和使用中的移动设备的复杂性, 有效的需求, user-friendly, 高性能移动应用程序可能会大幅增加. 能够智能而高效地开发这些应用程序将继续是至关重要的.

在选择网站时必须考虑许多因素, native, 以及针对移动设备的混合移动应用选项. 每种方法都有其优点, 但移动网络应用通常代表着你最有效的开发(也就是进入市场的时间)选择. 你应该选择走这条路吗, 我希望这个手机网站开发教程能帮助你成功地、最直接地到达你的目的地.