HTML5移动Web开发（七）——通过界面图标启动Web应用-白红宇

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

阅读量：4358 次

发布时间：2019-06-07

本文共 2010 字，大约阅读时间需要 6 分钟。

　　现在我们要使用手机上某个应用时，通过点击屏幕上的图标就可以运行。但是对基于HTML的Web应用来说，运行起来就比较麻烦了，用户必须先打开浏览器，然后访问想使用的应用程序站点。现在我们想把一个指定的Web应用绑定到界面上的一个图标，用户通过点击界面上的图标就可以启动对应的Web应用了。

　　但是不同浏览器对于触碰图标的反应是不一致的。在这里，我们将探索不同浏览器对于点击图标启动的不同反应，从而使点击图标启动Web应用的特性能够覆盖到更多的浏览器。

下载源代码例子（提取码：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

          Mobile Cookbook

从iOS4.2.1起，iOS提供了一个新的功能，我们可以通过设置sizes属性来为不同的设备提供不同的图标。

对于iPhone4使用的高分辨率Retina屏幕，使用"114x114"大小的图标。

对于iPad，使用"72x72"大小的图标。

对于未使用Retina屏幕的iPhone和Android2.1以上版本的设备，使用"57x57"大小的低分辨率图标。

对于诺基亚Symbian 60的设备来说，一个快捷键图标只是用来告诉移动设备这个图标的位置。

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

疑问：

rel属性是否支持多值？如果支持的话，我们就可以把示例中的最后两行合并为：

曾经尝试过这种写法，但是移动端浏览器根本无法识别这样的写法。你可能还看过别人像下面这么写：

一个开源项目Mobile Boilerplate，该项目的目的是为移动设备的前端开发提供一个稳健

的基础模板，它已经囊括了现阶段所有的场景，以及一些未来可能出现的场景。

https://github.com/h5bp/mobile-boilerplate/blob/master/index.html#L21

关于触摸式图标的一切

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

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

转载于:https://www.cnblogs.com/Joanna-Yan/p/4857088.html

你可能感兴趣的文章