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

What are the functions of mobile html5meta tags? I believe many inexperienced people don't know what to do about it. Therefore, this article summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

When making a mobile version of the website, in addition to the simple page, easy operation and other places that visitors can see, it is the setting of the Meta tag, the reasonable setting of the Meta tag, the search engine optimization of the mobile version of the website, and the rendering and display of the mobile browser. For the desktop platform web layout we are all familiar with the meta tag, it will always be inside the head element, to do SEO friends must have special feelings for meta it, today we will talk about the mobile platform meta tag, in the mobile platform meta tag what magical effect?

1. Viewport of Meta

When it comes to mobile platform meta tags, we have to talk about viewport, so what is viewport?

Viewport is the visible area. For desktop browsers, viewport refers to the area used to view web pages after removing all toolbars, status bars, scroll bars, etc.

. For traditional WEB pages, the width of 980s is normal and full on iphone, but it may be a problem for webapp. On iphone, our webapp usually has a width of 320under the vertical screen. What effect does it look like when we display pages on iphone? Some people may think that the iPhone is not the width of 320. it feels like the screen is full, isn't it? Let's take a look at the following layout displayed on iPhone

The code is as follows:

Meta Viewport div,body {padding:0; margin:0;} body {padding-top:100px; color:#fff;} div {width:320px; height:100px; margin:0 auto; background:#000; text-align:center; font:30px/100px Arial;} AppUE

So we have to change the viewport, and we have the following property values to set:

Width: width of the viewport (range from 200 to 10000, default is 980 pixels)

Height: height of the viewport (range from 223 to 10000)

Initial-scale: initial scale (range > 0 to 10)

Minimum-scale: the minimum scale to which users are allowed to zoom

Maximum-scale: the maximum scale to which users are allowed to zoom

User-scalable: whether the user can zoom manually

For these properties, we can set one or more of them, and you don't need to set them all at the same time. IPhone will automatically calculate the values of other properties based on the properties you set, rather than directly using the default values.

If you put initial-scale=1, then width and height will automatically be 320mm 356 in vertical screen (not 320mm 480 because the address bar and so on take up space) and 480mm 208 in landscape screen. Similarly, if you just set width, you will automatically calculate initial-scale and height. For example, if you set width=320, the initial-scale is 1 in vertical screen and 1.5 in horizontal screen. So how exactly do you let Safari know about these settings? In fact, it is very simple, just a meta, such as:

The code is as follows:

Well, we can press the full screen to layout our page, do not have to worry about the page is very small!

2. Format-detection of Meta

The code is as follows:

You clearly write a string of numbers without a link style, but iPhone will automatically add a link style to your text, and clicking on this number will automatically dial! How do I get rid of this dial-up link? At this point, it's time for our meta to show off its power again, with the following code:

Telephone=no forbids turning numbers into dial-up links!

Telephone=yes will open the conversion of numbers into dial-up links, to turn on the conversion function, this meta does not need to be written, in the default is open!

3. Apple-mobile-web-app-capable of Meta

The purpose of this meta is to delete the default Apple toolbar and menu bar. Content has two values "yes" and "no". When we need to display the toolbar and menu bar, the line meta does not need to be added, the default is to display.

4. Apple-mobile-web-app-status-bar-style of Meta

The code is as follows:

The function is to control the display style of the status bar

The code is as follows:

Status-bar-style:black

Status-bar-style:black-translucent

Today, let's briefly say which Meta tags need to be added to the mobile version of the website:

Viewport

Viewport is almost a recognized standard. It was originally created by Apple as a mobile version of Safari on iPhone. Due to the popularity of iPhone, it is accepted by most other mobile browsers, such as Opera Mobile, iPhone, Android, Iris, IE, BlackBerry, Obigo, Firefox.

The most basic example is to make the site full-screen width on mobile:

The code is as follows:

HandheldFriendly

Undefined

Undefined

The code is as follows:

MobileOptimized

This is an Windows proprietary meta tag that eventually becomes another way to identify mobile content, but the disadvantage of this tag is that a specific width must be given, and again, the support of this tag is unknown:

The code is as follows:

After reading the above, have you mastered the functions of mobile html5meta tags? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.