Touch screen website development series (1)-Ios web app (IOS Meta)

ArticleDirectory

• The first meta tag indicates:
• The second meta tag indicates:
• First meta:
• Second meta:

<Meta name = "viewport" content = "width = device-width, initial-scale = 1"/> pingmu

The development of touch screen websites is actually much better than the development of mobile websites in the past few years. The browsers of iOS, Android, bbos6, and other mobile devices are the core of WebKit, this shows that HTML5 css3, which has not yet been established on the PC, can be used here, greatly reducing the workload and lack of data.

This article describes the effect or function help of the definition of IOS touch-screen website meta.

Basically speaking:

The mobile client has several general definitions of meta:

 
<Meta content ="Width = device-width, initial-scale = 1.0, maximum-scale = 1.0, user-scalable = 0;"Name ="Viewport">
 

 
<Meta content ="Telephone = No"Name ="Format-detection"/>
 

The first meta tag indicates:

• The width of the document and the device must be kept;
• The maximum width ratio of the document is 1.0 (initial-scale initial scale value and maximum-scale maximum scale value );
• User-scalable defines whether to scale (0 indicates no scaling), so that the page size is fixed on the device.

(Note: In actual tests, the HTC G7 system browser does not support this rule and can zoom in the page. Once the response box is enlarged, the problem may occur on the Russian page. Solution: Define the Min-width and body {Min-width: 300px;} of the page ;})

The second meta tag indicates:

• Enable the phone number function when devices browse the Web page (different device interpretations, itouch click the number to save the contact, iPhone to call the phone), ignore recognizing the number in the page as the phone number.

If you need to enable the telephone function, telephone = yes. The specific call format can be written in this way.Code<A href = "13888888888"> call me </a>. If Google Maps, iTunes and YouTube links are displayed on the pageProgramComponent.

Private attributes defined by IOS devices for Meta:

 
<Meta name ="Apple-mobile-web-app-capable"Content ="Yes"/>
 

<Meta name ="Apple-mobile-web-app-status-bar-style"Content ="Black"/>
 

Here we will introduce in detail the functions of iOS devices for these two meta files (the app is called an offline app in the outside world, but it may be misunderstood in the literal sense that it can only be disconnected from the network, so here I still use the web app description .) :

The meta shows that the content is "Web application XX of Apple devices". That is to say, this meta is specially defined for Web applications. But what is web app?

Visit: http://www.apple.com/webapps/ you will be able to understand.

Web apps are HTML5 applications. For example, you can develop an HTML5 application (such as beebot, Tetris, and utilities fee query ), the HTML5-based reference of IOS is a leader in mobile devices. Why do you want to continue:

Image 1: save on the website

Image 2: save to the home screen

Figure 3: enter a name

Figure 4: style on the home screen

Figure 5: startup Interface

Figure 6: interface after startup

Figure 7: Running icons in the background-independent

Figure 8: Edit icon

Figure 9: icon deletion prompt

It can be seen that the running appearance of the program is different from that of the browser. It is actually rendered through the core of the browser. It can be seen that an app is running, similar to a shortcut.

There are two main advantages of Web apps::

• It does not need to be released through the Apple store.
• Low development costs. using HTML5 technology and the JS functions provided by Apple, you can achieve slide and other effects. The effects can completely simulate the effects of applications and are very suitable for clients of enterprises.

The most obvious disadvantage:

• Push is not supported ).

Everyone knows the innovations brought about by HTML5. One of the features is the support for push (now chrome supports push on PC). Although this function cannot be implemented on Apple, this skill should be developed in the future (I feel that if the web app supports pushing, it will have an impact on its own app store business !!!).

Let's talk about the settings of these two meta items for the web app ~

 

First meta:

 
<Meta name ="Apple-mobile-web-app-capable"Content ="Yes"/>
 

Note:

• The website enables support for Web apps.

Second meta:

<Meta name ="Apple-mobile-web-app-status-bar-style"Content ="Black"/>
 

Note:

• The color of the status bar (the top bar of the screen) in the web app;
• The default value is default (white), which can be set to Black (black) and black-translucent (gray translucent ).

Note:

• If the value is "black-translucent", it will occupy the page PX position and float above the page (it will overwrite the page 20px height-iphone4 and itouc4'sThe Retina screen is 40px).
• For more information, see image 10, image 11, and image 12.

Correction:

• I checked some materials and said that the property of apple-mobile-web-app-status-bar-style is to hide the status bar. In fact, this is a misunderstanding. Here, I will correct this problem.

Figure:

Figure 10: Black

Figure 11: default status

Figure 12: Black-translucent status

You can configure two meta settings to support the web app.

Other settings of Apple web app:

Of course, the icon and startup interface of the web app require additional code at both ends, as shown below:

<LINK rel ="Apple-touch-icon-precomposed"Href ="Iphone_milanoo.png"/>
 

Note:

• This link is used to set the icon file path for placing the web app on the home screen (Image 4 ).

Usage:

• You must note that this path is placed under the root directory of the website document, but not the root directory of the server document.
• The image size can be set to 57*57 (PX) or 114*114 (PX) for retina, and 72*72 (PX) for iPad)

 
<LINK rel ="Apple-touch-startup-Image"Href ="Milanoo_startup.png"/>
 

Note:

• This link is used to set the interface (image 5) at startup. The path strength is similar to that above.

Usage:

• You must note that this path is placed under the root directory of the website document, but not the root directory of the server document.
• The size of the startup interface must be 320*640 (PX), which was originally thought to be double for the Retina screen, but not for the image.

Also note that, 3, the default name is the content of the title label of the Code.

So far, a web app has been created.

For details about the two web app meta files, refer to the official explanation:

Http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

For more parameter settings on Link (for example, iPod, iPad, and iPhone icons of different sizes), see the official standard documentation:

Http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

Later: Although Web apps may be the trend of mobile website applications in the future, we can see some areas that are not powerful enough. As far as the current ios4 device is concerned, we have already been reported, the Running Performance of Web apps is not high, and there are still latencies, because safari itself has a javascript Acceleration Engine, but although web apps are rendered through the core of WebKit, but it is not running in Safari, so the JS engine cannot accelerate it.