现在我们要使用手机上某个应用时，通过点击屏幕上的图标就可以运行。但是对基于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. java类集开发中一对多和多对多的关系的实现

    摘自<java开发实战经典>李兴华.著 一对多的关系 一个学校可以包含多个学生,一个学生属于一个学校,那么这就是一个典型的一对多关系,此时就可以通过类集进行关系的表示. 在定义Studen ...

  2. selenium 切换窗口 每次成功code

    最近用了网络上别人的一段切换窗口的code每次成功了,不错,学习 // 根据Title切换新窗口 public boolean switchToWindow_Title(WebDriver drive ...

  3. explode，split，preg_split性能比较

      explode,split,preg_split性能比较 分类: php2012-07-12 09:46 1109人阅读 评论(1) 收藏 举报 三个函数都是用来对字符串进行分割,下面分几个实验来 ...

  4. wxGlade的图标，竟来自名画！

    一直用wxGlade做GUI的,今天突然发现它的图标和一副油画很像,查了下资料果然如此.  wxGlade的图标,而且图标的文件名竟然就叫做mondrian.ico 下面是蒙德里安的作品,<构图 ...

  5. FileInputStream和BufferedInputStream的区别

    FileInputStream 属于数据源 BufferedInputStream 属于FileInputStream的一个装饰 BufferedInputStream 有个内部缓冲区当read时会先 ...

  6. [.NET领域驱动设计实战系列]专题七：DDD实践案例：引入事件驱动与中间件机制来实现后台管理功能

    一.引言 在当前的电子商务平台中,用户下完订单之后,然后店家会在后台看到客户下的订单,然后店家可以对客户的订单进行发货操作.此时客户会在自己的订单状态看到店家已经发货.从上面的业务逻辑可以看出,当用户 ...

  7. 用StackExchange.Redis客户端连接阿里云Redis服务遇到的问题

    阿里云推荐的Redis服务.NET客户端是ServiceStack.Redis,但ServiceStack.Redis不支持异步,不支持.NET Core,于是尝试使用StackExchange.Re ...

  8. 人人都是 DBA（IX）服务器信息收集脚本汇编

    什么?有个 SQL 执行了 8 秒! 哪里出了问题?臣妾不知道啊,得找 DBA 啊. DBA 人呢?离职了!!擦!!! 程序员在无处寻求帮助时,就得想办法自救,努力让自己变成 "伪 DBA& ...

  9. 一次外企QQ面试

    无忧上挂了简历,让个外企的hr约好面试,今天刚面完,整理出来给大家看看.难度不是很大,基本就是Asp.net Mvc 用到的东西,没有问数据库方面的. Part I – Frontend  1. Tr ...

  10. Linux cat命令

    200 ? "200px" : this.width)!important;} --> 介绍 cat命令经常会用来查看一个文件的内容,并且结合它本身的一些参数经常可以用来做一 ...