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