JavaScript爲iphone添加到主屏幕

時間 2019-11-09

標籤 javascript iphone 添加屏幕欄目 JavaScript 简体版

原文原文鏈接

iphone手機有一個書籤欄上能夠將當前在瀏覽的網頁添加到主屏幕，用戶添加該選項以後，就能夠從桌面上啓動這個web程序，讓人看起來有點像web app同樣，深受許多人的喜好。可是不少人殊不知道或者懶得去設置，本文將介紹一個javascript提示用戶添加到主屏幕。 javascript

設定主屏幕圖標

ios 的網頁圖標與傳統的網頁 favicon 類似, 處理方式也差很少, 下面會爲你介紹幾種處理方式. css

放置在默認位置 html

建立一個 PNG 圖片, 命名爲 apple-touch-icon.png 或者 apple-touch-icon-precomposed.png, 放置在網站根目錄便可. html5

指定圖標路徑 java

爲頁面指定一個圖標路徑, 在網頁的 head 部分代碼以下: ios

<link rel="apple-touch-icon" href="/custom_icon.png"/>

爲不一樣設備指定圖標 git

在網頁中爲不一樣的設備指定特殊圖標, 由於 iPhone 和 iPad 的圖標尺寸不同, 須要 sizes 屬性來進行區分, 若是沒有定義 sizes 屬性, 默認 sizes 是 57 x 57. 代碼以下: github

<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="72x72" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="114x114" href="touch-icon-iphone4.png" />

若是沒有圖片尺寸能夠匹配設備圖標的尺寸, 存在比設備圖標大的圖片, 將使用比設備圖標尺寸略大的圖片; 若是沒有比設備圖標大的圖片, 則使用最大的圖片. web

若是沒有在網頁中指定圖標路徑, 將會在根目錄搜尋以 apple-touch-icon... 和 apple-touch-icon-precomposed... 做爲前綴的 PNG 圖片. 假設如今有一個設備的圖標大小是 57 x 57, 系統將按如下順序搜尋圖標: app

apple-touch-icon-57x57-precomposed.png
apple-touch-icon-57x57.png
apple-touch-icon-precomposed.png
apple-touch-icon.png

爲用戶加上提示

經過添加一個JavaScript代碼來邀請用戶添加到主屏幕，該庫使用了HTML5的本地存儲跟蹤是否已經顯示過了，以免重複出現。

目前使用比較多和有在更新的一個庫來自這裏：http://cubiq.org/add-to-home-screen

它能夠在Safari或者Chrome移動版中出現以下的提示消息（有不一樣語言，中文等）

下載和演示

下載演示

示例代碼：

<head>
<title>Add To Home</title>
...
<link rel="stylesheet" type="text/css" href="../../style/addtohomescreen.css">
<script src="../../src/addtohomescreen.js"></script>
<script>
addToHomescreen();
</script>
</head>

選項設置：

addToHomescreen({
   startDelay: 5 //開始的間隔
});

addToHomescreen({
   skipFirstVisit: true, //首次跳過出現
   maxDisplayCount: 1 //最多出現次數
});

最後，若是你使用jqMobile，你還能夠看看另一個版本：https://github.com/okamototk/jqm-mobile-bookmark-bubble

以上兩個版本均有這個庫的影響：mobile-bookmark-bubble

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。