Detailed explanation of the application of meta tags in mobile platform development

Everyone is familiar with the meta tag in desktop platform web layout. 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 magical effects do the meta tag have on the mobile platform?

1. Meta viewport

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, a width of 980 is normal and fills the entire screen when displayed on an iPhone. However, for webapps, this may be a problem. On iPhones, our webapps are usually 320 wide in vertical orientation. So what will our 320-width page look like on an iPhone? Some people may think that the width of iPhone is not 320, it feels like it should fill the entire screen, but is that true? Let's take a look at the following layout displayed on the iPhone

Copy code

The code is as follows:

<!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>

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

width: the width of the viewport (range from 200 to 10,000, default is 980 pixels)
height: the height of the viewport (range from 223 to 10,000)
initial-scale: initial scale (range from >0 to 10)
minimum-scale: The minimum scale that the user is allowed to zoom to
maximum-scale: The maximum scale to which the user is allowed to zoom
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. The iPhone will automatically calculate other property values based on the properties you set, rather than directly using the default values.

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

Copy code

The code is as follows:

Okay, now we can layout our page in full screen, no need to worry about the page being displayed very small!

2. Meta format-detection

Copy code

The code is as follows:

You clearly wrote a string of numbers without adding a link style, but the iPhone will automatically add a link style to your text, and will automatically dial when you click on the number! How do I remove this dial-up link? Now it’s time for our meta to come into play. The code is as follows:

telephone=no disables the conversion of numbers into dial-up links!
Telephone=yes turns on the conversion of numbers into dial-up links. To turn on the conversion function, you don’t need to write this meta. It is turned on by default!

3. Meta: apple-mobile-web-app-capable

Copy code

The code is as follows:

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, we don't need to add this line of meta. It is displayed by default.

4. Meta apple-mobile-web-app-status-bar-style

Copy code

The code is as follows:

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

Copy code

The code is as follows:

status-bar-style:black
status-bar-style:black-translucent

<<: Solution to Vue3.0 error Cannot find module'worker_threads'

>>: About nginx to implement jira reverse proxy