现在我们要使用手机上某个应用时，通过点击屏幕上的图标就可以运行。但是对基于HTML的Web应用来说，运行起来就比较麻烦了，用户必须先打开浏览器，然后访问想使用的应用程序站点。现在我们想把一个指定的Web应用绑定到界面上的一个图标，用户通过点击界面上的图标就可以启动对应的Web应用了。
　　但是不同浏览器对于触碰图标的反应是不一致的。在这里，我们将探索不同浏览器对于点击图标启动的不同反应，从而使点击图标启动Web应用的特性能够覆盖到更多的浏览器。 
 　　

下载源代码例子（http://pan.baidu.com/s/1o6AavAM  提取码：8nyq）中，有一个图标包是为不同移动设备准备的，里面有图片文件：
apple-touch-icon.png
apple-touch-icon-57x57-precomposed.png
apple-touch-icon-72x72-precomposed.png
apple-touch-icon-114x114-precomposed.png
apple-touch-icon-precomposed.png

新建ch02r01.html

<!doctype html>

<html>

  <head>

        <title>Mobile Cookbook</title>

        <meta charset="utf-8">

        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png">

        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png">

        <link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">

        <link rel="shortcut icon" href="icons/apple-touch-icon.png">

  </head>

  <body>

    <header>

    </header>

        <div id="main">

        </div>

    <footer>

    </footer>

    </body>

</html>

从iOS4.2.1起，iOS提供了一个新的功能，我们可以通过设置sizes属性来为不同的设备提供不同的图标。
对于iPhone4使用的高分辨率Retina屏幕，使用"114x114"大小的图标。
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png">

对于iPad，使用"72x72"大小的图标。
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png">

对于未使用Retina屏幕的iPhone和Android2.1以上版本的设备，使用"57x57"大小的低分辨率图标。
<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">

对于诺基亚Symbian 60的设备来说，一个快捷键图标只是用来告诉移动设备这个图标的位置。
<link rel="shortcut icon" href="icons/apple-touch-icon.png">

这是根据iOS的桌面快捷图标制作的，对于Android上安装了Chrome for Android也可以达到同样的效果。用Safria或Chrome打开网站，按主菜单中的添加到主屏幕即可。返回到手机桌面时，就可以看到这个的webapp的图标了。

疑问：
rel属性是否支持多值？如果支持的话，我们就可以把示例中的最后两行合并为：
<link rel="shortcut icon apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png">
曾经尝试过这种写法，但是移动端浏览器根本无法识别这样的写法。你可能还看过别人像下面这么写：
<link rel="apple-touch-icon-precomposed" media="screen and (min-resolution:150dpi)" href="icons/apple-touch-icon-114x114-precomposed.png">

一个开源项目Mobile Boilerplate，该项目的目的是为移动设备的前端开发提供一个稳健
的基础模板，它已经囊括了现阶段所有的场景，以及一些未来可能出现的场景。
https://github.com/h5bp/mobile-boilerplate/blob/master/index.html#L21

关于触摸式图标的一切
这次关于触摸式图标的大部分观点都来自于Mathias Bynens。可以看一下他发表过的一篇

文章"关于触摸式图标的一切":http://mathiasbynens.be/notes/touch-icons

HTML5移动Web开发（七）——通过界面图标启动Web应用的更多相关文章

  1. IOS 通过界面图标启动Web应用 + 全屏应用 + 添加到主屏幕

    请注意!!!使用了[全屏模式之后].页面的顶部会空出一大块.而且这并不属于margin,padding,或者定位.就是单纯的空出来非常难调试.其实坑就是这里 在 iPhone「添加到主屏幕」时显示自定 ...

  2. Web开发与设计之Google兵器谱-Web开发与设计利器

    Web开发与设计之Google兵器谱-Web开发与设计利器 博客分类: Java综合 WebGoogleAjaxChromeGWT 笔者是个Java爱好者也是用Java进行web开发的工作者.平时笔者 ...

  3. Web开发经验谈之F12开发者工具/Web调试[利刃篇]

    引语:如今的整个Web开发行业甚至说整个软件开发行业,已经相当成熟,基本上已经很少找不到没有前人做过的东西了,或者换句话说,你想要实现的功能,你总能在某个地方搜索到答案,关键是你有没有这个时间精力去搜 ...

  4. 324篇CSS应用效果集合（梦想天空，可同时应用于Web开发与Qt界面开发）

    http://www.cnblogs.com/lhb25/category/146075.html http://www.yyyweb.com/

  5. web开发(七) JSTL标签库

    在网上看见一篇不错的文章,写的详细. 以下内容引用那篇博文.转载于<http://www.cnblogs.com/whgk/p/6432786.html>,在此仅供学习参考之用. 一.为什 ...

  6. 【Debug】Web开发中，Tomcat正常启动，访问欢迎页404，怎么办？

    访问页面出现404是一个会经常遇到的问题.每次开发Web项目时总要掉这个坑里几次,而且还不长记性.今天来总结一下,开发时遇到这个问题的解决思路. 1. 查看访问地址是否正确,有无拼写错误. 越是低级的 ...

  7. Java WEB开发环境搭建以及创建Maven Web项目

    根据此链接博文学习配置: http://www.cnblogs.com/zyw-205520/p/4767633.html 1.JDK的安装 自行百度,(最好是jdk1.7版本的) 测试如下图,即完成 ...

  8. Web开发敏捷之道应用Rails 进行Web开发（原书第4版）遇到的问题

    第11章:建立一个基于Ajax的购物车 原书是这样的: 问题:create.js.rjs rails4算是彻底抛弃rjs了,所以按照书上使用以下代码,是一点作用没有用的. 这里介绍一种方法: 1.在a ...

  9. HTML5移动Web开发实战 PDF扫描版​

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

随机推荐

  1. Oracle的update语句优化研究

    最近研究sql优化,以下文章转自互联网: 1.     语法 单表:UPDATE 表名称 SET 列名称 = 新值 WHERE 列名称 = 某值 如:update t_join_situation s ...

  2. MyEclipse中如何安装插件（以Subclipse为例）[转]

    一.到官方上下载svn1.8.3,下载后的文件名叫site-1.8.3.zip 地址:http://subclipse.tigris.org/servlets/ProjectDocumentList? ...

  3. Android网页中tel,sms,mailTo,Intent,Market协议用法总结

     tel:协议---拨打电话 <a href="tel:">调出拨号界面</a> <a href="tel:10086">调 ...

  4. Java多线程1：进程与线程概述

    进程和线程 谈到多线程,就得先讲进程和线程的概念. 进程 进程可以理解为受操作系统管理的基本运行单元.360浏览器是一个进程.WPS也是一个进程,正在操作系统中运行的".exe"都 ...

  5. 作业二：在github上过程

    注册Github

  6. 优雅的使用Python之软件管理

    上篇<优雅的使用python之环境管理>http://dwz.cn/wTsOr,如何管理python环境,有了一个干净的python环境之后,就不可避免的安装python软件包(pytho ...

  7. Java提高篇（三六）-----Java集合细节（二）：asList的缺陷

    在实际开发过程中我们经常使用asList讲数组转换为List,这个方法使用起来非常方便,但是asList方法存在几个缺陷: 一.避免使用基本数据类型数组转换为列表 使用8个基本类型数组转换为列表时会存 ...

  8. java提高篇(八)----详解内部类

    可以将一个类的定义放在另一个类的定义内部,这就是内部类. 内部类是一个非常有用的特性但又比较难理解使用的特性(鄙人到现在都没有怎么使用过内部类,对内部类也只是略知一二). 第一次见面 内部类我们从外面 ...

  9. 赴美工作常识（Part 2 - 申请）

    在<Part 1 - 签证>的评论中有人提到,说我还没说如何申请职位就说签证的事情了.一方面,签证的周期决定了你申请职位的时间,错过关键时间点的话就可能错过重要的机会.另一方面,传统意义上 ...

  10. GOOGLE PROTOBUF开发者指南

    原文地址:http://www.cppblog.com/liquidx/archive/2009/06/23/88366.html 译者: gashero 目录 1   概览 1.1   什么是pro ...