现在我们要使用手机上某个应用时，通过点击屏幕上的图标就可以运行。但是对基于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. bootstrap双日历插件实例化

    网站中难免会用到日期选择插件,常见的有jquery的,也有bootstrap的.单日历的就不说了,实例化都比较简单.今天给大家介绍一下bootstrap的双日历插件. http://www.jq22. ...

  2. 用户图形界面（GUI）学习笔记（一）——Swing与AWT

    一.Swing与AWT 对象窗口工具箱(Abstact Window Toolkit,AWT),是JAVA1.0刚出现的时候,包含的一个GUI设计类库.它将处理用户界面元素的任务委派给每个目标平台(W ...

  3. java入门（1）

    今天开始了java的学习,是同学给的一个说是外面培训的视频,因为我个人的专业是硬件,对软件开发其实也蛮有兴趣,不过确实有跟风的嫌疑哈,因为大家都说现在的主流就是java,所以就跟软件的人要了它的资料, ...

  4. Git凭证存储（简单易懂，一学就会，认真看）

    今天给自己提了一个问题,当我们在github.com或者gitlab上面新建仓库,并克隆到本地,首次使用的时候,会被问及用户名密码,但是这两个信息存在哪里呢? 带着这个问题,我开始搜索,并在<P ...

  5. 分享我的“艺术品”：公共建筑能耗监测平台的GPRS通讯服务器的开发方法分享

    在这个文章里面我将用一个实际的案例来分享如何来构建一个能够接受3000+个连接的GPRS通讯服务器软件,这个软件被我认为是一个艺术品,实现周期为1.5个月,文章很长,有兴趣的同志慢慢看.在这里,我将分 ...

  6. log4net入门

    简介 几乎所有的大型应用都会有自己的用于跟踪调试的API.因为一旦程序被部署以后,就不太可能再利用专门的调试工具了.然而一个管理员可能需要有一套强大的日志系统来诊断和修复配置上的问题. 经验表明,日志 ...

  7. Oracle Enterprise Manager打不开的解决方法

    之前OEM一直可以打开,但今天上班发现打不开了,输入http://localhost:1158/em 提示该网页无法打开. 那么检查一下: cmd进命令行 C:\Documents and Setti ...

  8. 两种include方式及filter中的dispatcher解析

    两种include方式 我自己写了一个original.jsp,另外有一个includedPage.jsp,我想在original.jsp中把includedPage.jsp引进来有两种方式: 1.& ...

  9. Java IO8：IO简单总结

    字节流.字符流继承关系 前几篇文章讲解了字节流.字符流的使用,不过Java提供给用户的流类远不止此,限于篇幅原因,没办法一一讲解,而且也没有必要一一讲解,就像我在写博客的时候多次提到的,有问题的时候学 ...

  10. dojo/request模块整体架构解析

    总体说明 做前端当然少不了ajax的使用,使用dojo的童鞋都知道dojo是基于模块化管理的前端框架,其中对ajax的处理位于dojo/request模块.一般情况下我们使用ajax请求只需要引入do ...