META correlation

1. Title (IOS) added to the home screen

<meta name="apple-mobile-web-app-title" content="Title"> 

2. Enabling WebApp Full Screen Mode (IOS)

When the website is added to the home screen and then clicked to start, the address bar can be hidden (jumping from the browser or entering links does not have this effect)

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-touch-fullscreen" content="yes" /> 

3. Baidu prohibits transcoding

When you open a web page through Baidu mobile phone, Baidu may transcode your web page and post its advertisement on your page, which is very disgusting. But we can ban it by using this meta tag:

<meta http-equiv="Cache-Control" content="no-siteapp" />

Baidu SiteApp Transcoding Statement

4. Set the background color of the status bar (IOS)

Set the background color of the status bar, only in ____________

"apple-mobile-web-app-capable" content="yes"

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

content parameter:

• default: The background of the status bar is white.
• Black: The background of the status bar is black.
• Black-translucent: The status bar background is translucent. If set to default or black, the page content starts at the bottom of the status bar. If set to black-translucent, the content of the page is filled with the whole screen, and the top of the page is blocked by the status bar.

5. Mobile Phone Number Recognition (IOS)

On iOS Safari (which other browsers and Android don't), digits that look like phone numbers are processed as phone links, such as:

• Seven digits, such as 1234567
• Numbers with parentheses and plus signs, such as: (86) 123456789
• The number of double connection lines, such as 00-00-00111
• 11 digits, such as 13800138000

There may be other types of numbers that can also be identified. We can turn off the automatic identification of telephone numbers by meta as follows:

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

Turn on the phone function

<a href="tel:123456">123456</a>

Open SMS function:

<a href="sms:123456">123456</a> 

6. Mobile Mailbox Recognition (Android)

As with phone number recognition, on Android, mailbox format strings will be recognized. We can manage mailbox automatic recognition through the following meta:

<meta content="email=no" name="format-detection" /> 

Similarly, we can also use the tag attribute to open the function of long pop-up mailing by mailbox address:

<a mailto:dooyoe@gmail.com">dooyoe@gmail.com</a> 

7. Add Smart App Banner (IOS 6 Safari)

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

8. IOS Web app launches animation

Because the iPad startup area does not include the status bar area. So starting the picture needs to subtract the 20px size in the direction corresponding to the status bar area and the 40px size on the retina device accordingly.

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x960.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
<!-- iPad (landscape) -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

(landscape: horizontal screen | portrait: vertical screen)

9. APP icon added to the home screen

There are two slightly different ways to specify the icon path that web app Adds to the home screen:

<!-- Original design -->
<link href="short_cut_114x114.png" rel="apple-touch-icon-precomposed">
<!-- Adding highlight effect -->
<link href="short_cut_114x114.png" rel="apple-touch-icon">

* Apple-touch-icon: In IOS6 and below, a layer of highlights is automatically added to the icon (IOS7 has started to use a flat design style)* apple-touch-icon-precomposed: Use the "Design Original Icon"

Effect:

Icon size:

Different icons can be provided for different devices by specifying the size attribute (but in general, we only need to provide an icon the size of 114 x 114 pixels)

The official statement is as follows

Create different sizes of your app icon for different devices. If you're creating a universal app, you need to supply app icons in all four sizes.

For iPhone and iPod touch both of these sizes are required:

57 x 57 pixels

114 x 114 pixels (high resolution)

For iPad, both of these sizes are required:

72 x 72 pixels

144 x 144 (high resolution)

10. Prefer the latest versions of IE and Chrome

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 

11.viewport template

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
<meta content="email=no" name="format-detection">
<title>Title</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
//Let's start here.
</body>
</html>

Common problem

1. How does the mobile end define font-family

The fonts of three mobile phone systems:

ios system

• The default Chinese font is Heiti SC
• The default English font is Helvetica
• The default numeric font is Helvetica Neue
• No Microsoft Yahei Font

android system

• The default Chinese font is Droidsansfallback
• The default English and numeric fonts are Droid Sans
• No Microsoft Yahei Font

winphone system

• The default Chinese font is Dengxian.
• The default English and numeric fonts are Segoe
• No Microsoft Yahei Font

Each mobile phone system has its own default font, and does not support Microsoft Yahei if there is no special demand. There is no need to define Chinese font on the mobile phone. Helvetica can be used in the default English font and digital font of the system. All three systems support it.

* Code that defines fonts on the mobile side */
body{font-family:Helvetica;}

2. font-size font unit on mobile side chooses px or rem

For mobile devices that only need to be adapted, use px

For devices that need to be adapted to a variety of mobile devices, use rem, such as devices with relatively large resolution differences such as the iPhone and the iPad.

Go on --

Reprinted please indicate: Front-end recording Mobile Web Development Skills--Part 1