首页 > 代码库 > 打造移动终端的 WebApp（一）：搭建一个舞台

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

2024-07-28 15:46:03   218人阅读

 

最近随着 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 的体验，所以需要通过以下代码来关闭缩放：

<meta name = "viewport" content = "user-scalable=no, width=device-width">

设置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 更像一个原生应用，设置代码：

<link rel="apple-touch-icon" href="http://www.mamicode.com/icon.png" />

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

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

<link rel="apple-touch-icon-precomposed" href="http://www.mamicode.com/icon.png" />

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

<!--默认为 57x57 像素--><link rel="apple-touch-icon" href="http://www.mamicode.com/touch-icon-iphone.png" /><!--iPad 1 72x72 像素--><link rel="apple-touch-icon" sizes="72x72" href="http://www.mamicode.com/touch-icon-ipad.png" /><!--iPhone 4 114x114 像素--><link rel="apple-touch-icon" sizes="114x114" href="http://www.mamicode.com/touch-icon-iphone4.png" />

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

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

3.全屏显示 WebApp，隐藏 safari 导航栏以及工具栏：

当我们点击主屏图标打开浏览器进入 WebApp 时，默认情况下 Safari 还是会显示顶部导航栏以及底部工具栏，但这不是我们想要的结果，它们不仅不美观还减少了显示面积，所以可以用以下代码隐藏它们，让 WebApp 像原生应用一样全屏显示：

<meta name="apple-mobile-web-app-capable" content="yes" />

iPad 中的全屏显示效果，导航和工具栏已经没有了：

注：想达到全屏显示的效果必须通过主屏的图标打开网站，直接在Safari输入URL是不行的。

4.设置系统状态栏风格：

系统状态栏是 iOS 顶部显示运营商、WIFI、时间的部分，它无法隐藏，但可以设置灰、黑两种风格，设置代码如下：

<meta name="apple-mobile-web-app-status-bar-style" content="grey" /><meta name="apple-mobile-web-app-status-bar-style" content="black" />

5.启动画面设置：

当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好，所以我们需要通过以下代码来自定义启动画面：

<link rel="apple-touch-startup-image" href="http://www.mamicode.com/Startup.png" />

[2012.11.20]更新
与启图标类似，根据 iOS 设备的分辨率，其启动画面的图片尺寸也各不相同：

iPhone 3GS(及以前机型)：320×460 像素
iPhone 4、4S：640×920 像素
iPhone 5：1096×640 像素

iPad 1、2：768×1004 像素
New iPad：–
iPad mini —

注：如果图片尺寸不对将无法显示。

[2011.2.1]更新
如果想让一个 WebApp 在 iPhone 和 iPad 中同时具有启动画面，我们可以借助 Javascript 脚本来完成，通过判断设备navigator.userAgent信息，来更改href的值指向对应的图片路径：

//jQueryvar ua = navigator.userAgent.toLowerCase();if (ua.match(/iPad/i)=="ipad") {   $("link[rel=apple-touch-startup-image]").attr("href","images/startup_ipad.png");}

其他细节设置：

屏蔽iPhone下的拨号链接
iPhone 下会自动将连串数字转换为拨号超链接，如果没特别的需要还是将这个功能屏蔽为好：

<meta name="format-detection" content="telephone=no"/>

至此一个专属于 WebApp 的“舞台”就初步搭建完成了，当然这里也留下很多疑问，比如说iPhone与iPad分辨率差距很大，那么如何为它们分别设置启动画面、布局样式以及横屏竖屏的问题等，这些细节将在下一章讨论。

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


联系
我们