HTML5移动Web开发（七）——经过界面图标启动Web应用

时间 2019-11-26

标签 html5 html 移动 web 开发经过界面图标启动应用栏目 HTML5 繁體版

原文原文链接

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

下载源代码例子（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.htmlgit

<!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">github

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

对于未使用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">app

这是根据iOS的桌面快捷图标制做的，对于Android上安装了Chrome for Android也能够达到一样的效果。用Safria或Chrome打开网站，按主菜单中的添加到主屏幕便可。返回到手机桌面时，就能够看到这个的webapp的图标了。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