Home > Developer > Mobile Develop

HTML5 Mobile Web Development (vii)--launch web App with interface icon

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Now when we use an app on our phone, we can run it by tapping the icon on the screen. But for HTML-based Web applications, it can be cumbersome to run, and users must first open the browser and then access the application site they want to use. Now we want to bind a specified Web app to an icon on the interface, and the user can launch the corresponding Web app by clicking on the icon on the interface.
However, the response of different browsers to touch icons is inconsistent. Here, we'll explore the different browsers ' responses to clicking on the icon launch, so that clicking the icon launches the Web app's features to reach more browsers.

Download the source code example (Http://pan.baidu.com/s/1o6AavAM extract code: 8NYQ), there is an icon pack for different mobile devices, there are picture files:
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

New ch02r01.html

<!DOCTYPE HTML><HTML>  <Head>        <title>Mobile Cookbook</title>        <MetaCharSet= "Utf-8">        <Metaname= "Viewport"content= "Width=device-width, initial-scale=1.0">        <Linkrel= "apple-touch-icon-precomposed"Sizes= "114x114"href= "Icons/apple-touch-icon-114x114-precomposed.png">        <Linkrel= "apple-touch-icon-precomposed"Sizes= "72x72"href= "Icons/apple-touch-icon-72x72-precomposed.png">        <Linkrel= "apple-touch-icon-precomposed"href= "Icons/apple-touch-icon-precomposed.png">        <Linkrel= "shortcut icon"href= "Icons/apple-touch-icon.png">  </Head>  <Body>    <Header>    </Header>        <DivID= "Main">        </Div>    <Footer>    </Footer>    </Body></HTML>

From iOS4.2.1 onwards, iOS provides a new feature that allows us to set the sizes property to provide different icons for different devices.
For the high-resolution retina screen used by iPhone4, use the "114x114" size icon.
<link rel= "apple-touch-icon-precomposed" sizes= "114x114" href= "Icons/apple-touch-icon-114x114-precomposed.png" >

For ipad, use the "72x72" size icon.
<link rel= "apple-touch-icon-precomposed" sizes= "72x72" href= "Icons/apple-touch-icon-72x72-precomposed.png" >

For iphone and Android2.1 versions of devices that do not use the retina screen, use the low-resolution icon "57x57" size.
<link rel= "apple-touch-icon-precomposed" href= "Icons/apple-touch-icon-precomposed.png" >

For Nokia Symbian 60 devices, a shortcut icon is used to tell the location of the icon on the mobile device.
<link rel= "shortcut icon" href= "Icons/apple-touch-icon.png" >

This is based on the desktop shortcut icon for iOS, and the same effect can be achieved with chrome for Android installed on Android. Open the site with Safria or chrome and press Add to home screen from the main menu. When you return to your phone's desktop, you can see the WebApp icon.

Questions:
Does the Rel attribute support multiple values? If supported, we can merge the last two lines of the example into:
<link rel= "shortcut icon apple-touch-icon-precomposed" href= "Icons/apple-touch-icon-precomposed.png" >
Ever tried this way, but the mobile browser simply does not recognize such a notation. You may have seen others write like this:
<link rel= "apple-touch-icon-precomposed" media= "screen and (min-resolution:150dpi)" href= "icons/ Apple-touch-icon-114x114-precomposed.png ">

an open source project Mobile boilerplate, the project is designed to provide a robust front-end development of mobile devices
Base template, which already encompasses all of the current scenarios, as well as some scenarios that may arise in the future.
Https://github.com/h5bp/mobile-boilerplate/blob/master/index.html#L21

Everything about the touch icon
Most of the ideas about touch icons come from Mathias Bynens. You can look at one of the articles he published.
Article "Everything about the Touch icon": http://mathiasbynens.be/notes/touch-icons

HTML5 Mobile Web Development (vii)--launch web App with interface icon

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More