打造移动终端的WebApp（一）：搭建一个舞台-职坐标

打造移动终端的WebApp（一）：搭建一个舞台

安安 2017-11-21 来源：网络阅读 646 评论 0

摘要：最近随着 Apple iOS 和 Android 平台的盛行，一个新的名词 WebApp 也逐渐火了起来，这里我也趁着热潮做一个关于 WebApp 系列的学习笔记，分享平时的一些研究以及项目中的经验，在现阶段研究对象暂时限定为 iOS 平台(iPhone/iPad/iPod touch)，随后会扩展到 Android 平台。

最近随着 Apple iOS 和 Android 平台的盛行，一个新的名词 WebApp 也逐渐火了起来，这里我也趁着热潮做一个关于 WebApp 系列的学习笔记，分享平时的一些研究以及项目中的经验，在现阶段研究对象暂时限定为 iOS 平台(iPhone/iPad/iPod touch)，随后会扩展到 Android 平台。

对于 WebApp，我的理解是：它一个基于 Web 形式的应用程序，是针对智能手机、平板电脑等高性能移动设备做了特别优化的网页或网站，它相对原生应用程序(Native App)优势在于：

1. 我们可以使用熟悉的开发环境和开发工具，当然也包括熟悉的语言：HTML+CSS+Javascript

2. 测试方便，大多数情况下一个浏览器就OK，推荐使用Safari 5，自带的开发功能中可以模拟iphone/ipad等设备的UA

3. 开发速度快，维护简单，更新方便。

下面开始逐步学习、探讨如何打造一个适合移动终端的 WebApp。

一、准备工作：搭建一个舞台：

首先我们已经有一个性能不错的平台——基于 Webkit 内核的 Safari 浏览器(这里指的是 iOS 中的移动版 Safari，下同)，但这还不够，虽说是移动版浏览器，但在未设置、优化前，Safari 对页面的渲染方式更多的是为方便浏览 PC 网页而优化，这就难以体现 WebApp 的特点，所以我们必须通过一些设置来搭建一个属于 WebApp 的“舞台”。

PS：下面列举的代码都应放置在 HTML 文档的<head>标签内。

1.设置 viewpoint：

当我们在 Safari 中打开一个网站时，默认情况下浏览器会对网页进行缩放显示，目的是让 PC 页面能够完全展示在小屏幕设备中，而这种缩放功能会严重影响专为移动设备屏幕尺寸设计的 WebApp 的体验，所以需要通过以下代码来关闭缩放：

设置viewpoint前后效果对比：

简单了解下viewpoint的属性：

user-scalable – 用户是否可以手动缩放；
width – 定义viewport宽度(默认为980像素) ，例子中值为device-width是指设置为设备显示宽度；
height – viewport的高度；
initial-scale – 初始的缩放比例 (范围从 0 到10)；
minimum-scale – 允许用户缩放到的最小比例；
maximum-scale – 允许用户缩放到的最大比例；

有关viewpoint更详细的知识请移步：viewport不权威指南

2.设置主屏幕(Spring Board)启动图标：

Safari 浏览器有一个“添加到主屏幕”的功能，用户可以像保存书签一样把一个网站添加到主屏幕，下次用户直接点击主屏幕上的图标就能进入网站。

这个功能不仅方便用户快速访问我们的网站，而且也使我们的 WebApp 更像一个原生应用，设置代码：

iOS 系统会自动将图标生成具有高光、圆角和阴影效果：

如果你不想要系统自动生成的效果，可以增加rel="apple-touch-icon-precomposed"属性：

因为 iOS 分辨率，所以 icon.png 图片的尺寸也各不相同，我们可以通过sizes属性来分别定义，iOS 系统会自动获取向匹配的图片：

系统会自动选取网站title，作为名称显示在主屏图标下方，最长显示13字符。

为了在主屏达到最好的显示效果，title最好限制在六个中文长度内，超长的内容会被隐藏：