现在我们要使用手机上某个应用时，通过点击屏幕上的图标就可以运行。但是对基于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. Async/Await FAQ

    From time to time, I receive questions from developers which highlight either a need for more inform ...

  2. 【转载】硬盘MBR详细介绍

    原文地址:http://blog.chinaunix.net/uid-15007890-id-106892.html 硬盘MBR详细介绍      硬盘是现在计算机上最常用的存储器之一.我们都知道,计 ...

  3. C++混合编程之idlcpp教程Python篇(7)

    上一篇在这 C++混合编程之idlcpp教程Python篇(6) 第一篇在这 C++混合编程之idlcpp教程(一) 与PythonTutorial4工程相似,工程PythonTutorial5中,同 ...

  4. java HashMap那点事

    集合类的整体架构 比较重要的集合类图如下:   有序否 允许元素重复否 Collection 否 是 List 是 是 Set AbstractSet 否 否 HashSet TreeSet 是(用二 ...

  5. OSX 下搭建Asp.Net vNext的开发环境

    开年第一天,按照惯例逛逛各个网站,看看7天有没有什么错过的东西,偶见VS 2015的CPT 6发布了,据说更新ASP.NET,就顺便去官方网站看了看,也忘记在什么地方偶然发现一个叫OmniSharp的 ...

  6. 微软正式发布Visual Studio 2013 Update 3 (2013.3) RTM

    昨天微软的Visual Studio 2013 Update 3(Visual Studio 2013.3)正式发布(RTM)了,做为微软认证金牌合作的葡萄城控件,我们组织力量第一时间进行翻译.分享给 ...

  7. WPF，Silverlight与XAML读书笔记第四十三 - 多媒体支持之文本与文档

    说明:本系列基本上是<WPF揭秘>的读书笔记.在结构安排与文章内容上参照<WPF揭秘>的编排,对内容进行了总结并加入一些个人理解. Glyphs对象(WPF,Silverlig ...

  8. 冲刺阶段 day 9

    项目进展 昨天终于完成了教师部分的内容,今天我们又重新开始对之前系部设置不能实现的内容进行了编写,之前缺少删除和查询也做了补充,在与数据库的连接上也做了修改和更新. 存在问题 由于是之前遇到困难没做完 ...

  9. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  10. json-smart 使用示例(推荐fastjson)

    关于json库,请使用fastjson,这是我用过的最好用的json库! 地址:https://github.com/alibaba/fastjson ======================== ...