HTML5移動Web開發(七)——通過界面圖標啟動Web應用


  現在我們要使用手機上某個應用時,通過點擊屏幕上的圖標就可以運行。但是對基於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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM