JavaScript added to the home screen for iphone

The iphone has a bookmark bar to add the currently browsed page to the home screen, and after the user adds it, the Web app can be launched from the desktop, making people look a bit like web apps, which many people love. But many people do not know or bother to set, this article will introduce a JavaScript prompt user to add to the home screen.

Setting the Home Screen icon

The IOS Web page icon is similar to the traditional Web page favicon and is handled in the same way, and here are a few ways to deal with it.

Place in default location

Create a PNG image, named Apple-touch-icon.png or Apple-touch-icon-precomposed.png, to be placed at the root of the Web site.

Specify the icon path

To specify an icon path for the page, the Head section of the page is as follows:

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

assigning icons to different devices

Specify special icons for different devices in the Web page, because the IPhone and IPad icons are not the same size, you need to sizes the attribute to differentiate, if you do not define the sizes property, the default sizes is x 57. The code is as follows:

<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" />

If no picture size can match the size of the device icon, there is a larger picture than the device icon, will use a slightly larger than the device icon size of the picture; If there is no larger picture than the device icon, use the largest picture.

If you do not specify an icon path in the Web page, the root directory will be searched for Apple-touch-icon ... and apple-touch-icon-precomposed ... The PNG image as the prefix. Assuming that you now have a device with an icon size of 57 x, the system will search for the icon in the following order:

1. Apple-touch-icon-57x57-precomposed.png
2. Apple-touch-icon-57x57.png
3. Apple-touch-icon-precomposed.png
4. Apple-touch-icon.png

Add a hint to the user

By adding a JavaScript code to invite users to the home screen, the library uses HTML5 's local storage tracking to see if it has been displayed to avoid duplication.

Currently used more and have a library in the update from here: Http://cubiq.org/add-to-home-screen

It can appear in Safari or Chrome mobile version of the following message (in different languages, Chinese, etc.)

Download Demo

Example code:

Option settings:

addToHomescreen({ startDelay: 5 //开始的间隔});

addToHomescreen({ skipFirstVisit: true, //首次跳过出现 maxDisplayCount: 1 //最多出现次数});

Finally, if you use Jqmobile, you can also look at another version: Https://github.com/okamototk/jqm-mobile-bookmark-bubble

The two versions above have the effect of this library: mobile-bookmark-bubble

JavaScript added to the home screen for iphone