Shulou(Shulou.com)06/01 Report--

Today, the editor will share with you the relevant knowledge points about the design method of html5 mobile phone page, the content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

I. the settings of the ordinary mobile phone page

1. Description: zoom of the screen

Complete case:

Format-detection of 2.name ignores phone number and mailbox

It can also be written as:

Setting up 3.name the author's name and contact information

4. Other

2. Meta settings of iOS system:

1. Enable support for web app programs

Description:

2. Change the color of the top status bar

Description:

3. Set "add to the home screen icon"

Safari browser has a "add to home screen" function, users can save a bookmark to add a site to the home screen, the next time the user directly clicks the icon on the home screen to enter the site.

This feature not only makes it easy for users to quickly access our website, but also makes our WebApp more like a native application.

Because of the iOS resolution, the size of the icon.png image is also different. We can define it separately through the sizes attribute. The iOS system will automatically obtain the matching image:

Extend:

Add a hint for the user

By adding a JavaScript code to invite the user to add to the home screen, the library uses HTML5's local storage trace to see if it has been displayed to avoid repetition.

Currently there is a library that is widely used and is being updated from here:

4. Set the title of the desktop icon

In order to achieve the best display effect on the home screen, title should be limited to six Chinese characters in length, and super-long content will be hidden:

5. Set the startup screen

When the user clicks the home screen icon to open WebApp, the system will display the startup screen. If it is not set, the system will display the screenshot of the home page of the website by default. Of course, this experience is not very good, so we need to customize the startup screen through the following code:

According to the resolution of the iOS device, the image size of its startup screen is also different, so:

Or the following code, which has no practice, needs to be verified.

6. Add intelligent App advertisement Smart App Banner (iOS 6 + Safari)

The more commonly used meta

Or rather,

The meta attribute occupies an important position in HTML. Such as: search engine SEO, document character encoding, setting refresh cache and so on. Although some web pages may not use meta, as a regular army, it is necessary for us to understand some of the properties of meta and be proficient in using them.

These are all the contents of this article entitled "the Design method of html5 Mobile Page". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.