The meta tag of the mobile platform - the magical effect

Everyone is familiar with the meta tag in the web layout of the desktop platform. It is always located inside the head element. Friends who do SEO must have a special feeling for meta. Today we will talk about the meta tag of the mobile platform. What are the magical effects of mobile platform meta tags?

1, Meta yuki viewport

When it comes to mobile platform meta tags, we have to talk about viewport, so what is viewport?
Viewport is the viewing 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 980 is normal to display on the iPhone, and it is also full screen, but for webapps, it may be a bit of a problem. On the iPhone, our webapps usually have a width of 980 in the vertical screen. 320, what effect does our 320 page display on the iphone at this time? Some people may think that the iPhone is not the width of 320, it should be full screen, right? Let's take a look at the display of the following layout on the iPhone

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Meta Viewport</title>
    <style type="text/css">
    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;
    }
    </style>
</head>
<body>
<div>
AppUE
</div>
</body>
</html>

Shown on the iPhone as shown:

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

width: width of the viewport (ranging from 200 to 10,000, default is 980 pixels)
height: height of the viewport (ranging from 223 to 10,000)
initial-scale: initial scaling (ranging from >0 to 10)
minimum-scale: allowed The minimum scale to which the user is zoomed
maximum-scale: the maximum scale the user is allowed to zoom to
user-scalable: whether the user can manually scale

For these properties, we can set one or more of them, you don't need to set them all at the same time, iPhone will automatically calculate other property values according to the properties you set, instead of directly adopting the default values.

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

Well, we can lay out our page in full screen, no need to worry about the page being displayed very small!

2, Meta yuki format-detection

You clearly wrote a string of numbers without a link style, and the iPhone will automatically add a link style to your text, and click the number to automatically dial! How to remove this dial-up link? At this time, our meta should show its magic again. The code is as follows:

telephone=no prohibits converting numbers into dial-up links!
telephone=yes turns on the conversion of numbers into dial-up links. To turn on the conversion function, this meta does not need to be written. It is turned on by default!

3、Meta 之 apple-mobile-web-app-capable

The role of this meta is to delete the default Apple toolbar and menu bar. The content has two values "yes" and "no". When we need to display the toolbar and menu bar, this row of meta is not needed, it is displayed by default.

When the meta is added

4、Meta 之 apple-mobile-web-app-status-bar-style

status-bar-style:black-translucent

The meta tag of the mobile platform - the magical effect

Guess you like