Examples of application of meta tags in mobile platform development-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

Examples of application of meta tags in mobile platform development

高洛峰

Mar 03, 2017 pm 04:21 PM

meta tag

This article mainly introduces the detailed application of meta tags in mobile platform development. Friends who need it can refer to it

Everyone is familiar with the meta tag in the desktop platform web layout. It is always located in Inside the head element, SEO friends must have a special feeling for meta. Today we will talk about the meta tag of the mobile platform. What magical effects does the meta tag have on the mobile platform?

1. Meta’s viewport

Speaking of the mobile platform meta tag, we have to talk about viewport. So what is viewport?
Viewport is the visual 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, it is normal for the width of 980 to be displayed on the iPhone, and it also fills the screen. But for webapps, it may be a bit of a problem. On iPhones, our webapps usually have a width of 100cm in portrait mode. 320, what effect will our 320 page display on the iPhone? Some people may think that the iPhone is not 320mm wide, it should fill the screen, right? What is the reality? Let's take a look at the display of the following layout on the iPhone

The code is as follows:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Meta Viewport</title>
<style type="text/css">
p,body{
padding:0;
margin:0;
}
body{
padding-top:100px;
color:#fff;
}
p{
width:320px;
height:100px;
margin:0 auto;
background:#000;
text-align:center;
font:30px/100px Arial;
}
</style>
</head>
<body>
<p>
AppUE
</p>
</body>
</html>

So we must change the viewport, and we have the following attribute values that can be set:

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

For these attributes, we can set one or more of them. You do not need to set them all at the same time. iPhone will automatically calculate other attribute values based on the attributes you set, rather than directly using the default values.

If you set initial-scale=1, then width and height will automatically be 320*356 in portrait mode (not 320*480 because the address bar etc. all occupy space), and 480*208 in landscape mode. . 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 when the screen is in portrait mode, and becomes 1.5 when the screen is in landscape orientation. So how do these settings let Safari know? In fact, it is very simple, just a meta, in the shape of:

The code is as follows:

<meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;” />

Okay, we can lay out our page in full screen, no longer need to worry about the page display being small Got it!

2. Meta's format-detection

The code is as follows:

<meta name=”format-detection” content=”telephone=no” />

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 click the number to automatically dial the number! 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, there is no need to write this meta. It is turned on by default!

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

The code is as follows:

<meta name=”apple-mobile-web-app-capable” content=”yes” />

The function of this meta is to delete the default Apple Toolbars and menu bars. content has two values "yes" and "no". When we need to display the toolbar and menu bar, there is no need to add this line of meta. The default is to display it.

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

The code is as follows:

<meta name=”apple-mobile-web-app-status-bar-style” content=”default” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent” />

The function is Control the status bar display style

The code is as follows:

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

For more introduction examples of the application of meta tags in mobile platform development, please pay attention to the PHP Chinese website for related articles!

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Difficulty in updating caching of official account web pages: How to avoid the old cache affecting the user experience after version update?Mar 04, 2025 pm 12:32 PM

The official account web page update cache, this thing is simple and simple, and it is complicated enough to drink a pot of it. You worked hard to update the official account article, but the user still opened the old version. Who can bear the taste? In this article, let’s take a look at the twists and turns behind this and how to solve this problem gracefully. After reading it, you can easily deal with various caching problems, allowing your users to always experience the freshest content. Let’s talk about the basics first. To put it bluntly, in order to improve access speed, the browser or server stores some static resources (such as pictures, CSS, JS) or page content. Next time you access it, you can directly retrieve it from the cache without having to download it again, and it is naturally fast. But this thing is also a double-edged sword. The new version is online,

How do I use HTML5 form validation attributes to validate user input?Mar 17, 2025 pm 12:27 PM

The article discusses using HTML5 form validation attributes like required, pattern, min, max, and length limits to validate user input directly in the browser.

What are the best practices for cross-browser compatibility in HTML5?Mar 17, 2025 pm 12:20 PM

Article discusses best practices for ensuring HTML5 cross-browser compatibility, focusing on feature detection, progressive enhancement, and testing methods.

How to efficiently add stroke effects to PNG images on web pages?Mar 04, 2025 pm 02:39 PM

This article demonstrates efficient PNG border addition to webpages using CSS. It argues that CSS offers superior performance compared to JavaScript or libraries, detailing how to adjust border width, style, and color for subtle or prominent effect

What is the purpose of the <datalist> element?Mar 21, 2025 pm 12:33 PM

The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159

What is the purpose of the <progress> element?Mar 21, 2025 pm 12:34 PM

The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati

How do I use the HTML5 <time> element to represent dates and times semantically?Mar 12, 2025 pm 04:05 PM

This article explains the HTML5 <time> element for semantic date/time representation. It emphasizes the importance of the datetime attribute for machine readability (ISO 8601 format) alongside human-readable text, boosting accessibilit

What is the purpose of the <meter> element?Mar 21, 2025 pm 12:35 PM

The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex

See all articles