A complete list of meta tag settings for mobile devices

Preface

When I was studying the front end before, my understanding of meta tags was just this sentence.

<meta charset="UTF-8">

But when you open any website, you will find a column of meta tags in its head tag. For example, our 123WORDPRESS.COM website, but I was not familiar with it, so I added the meta tag to the forefront of the learning plan.

<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no”>

This is the most commonly used. The width and height directives specify the logical width and height of the viewport respectively. Their value is either a number in pixels or a special marker symbol. The width directive uses the device-width tag to indicate that the viewport width should be the device's screen width. Similarly, the height directive uses the device-height tag to indicate that the viewport height is the device's screen height.
The user-scalable directive specifies whether the user can scale the viewport, that is, zoom in and out of the view of the Web page. A value of yes allows the user to zoom in or out, a value of no does not allow zooming in or out

The initial-scale directive is used to set the initial scale of a web page. The default initial zoom value varies among smartphone browsers. Normally the device will render the entire web page in the browser, but setting this to 1.0 will display the web document without scaling.

The maximum-scale and minimum-scale directives are used to set user limits on the zoom ratio of a Web page. The value range is between 0.25 and 10.0. As with initial-scale, the value of these directives is the scale applied to the viewport contents.

All smartphone browsers support the ViewPort <meta> tag's width and user-scalabel directives. But Opera Mobile does not use the user-scalable directive, instead advocating that users should always retain the ability to zoom web pages in mobile browsers.

The following is really rarely used

devicePixelRatio

window.devicePixelRatio is the ratio of physical pixels on the device to device-independent pixels (dips). The formula is: window.devicePixelRatio = physical pixels / dips

fit-to-screen website adaptive screen

If the value of content is less than or equal to screen width, fit-to-screen will be disabled and the website will not stretch and scale with the browser.

If the value of content is greater than the screen width; fit-to-screen will be enabled

Apple browser related

2015-07-08

<meta name=”viewport” content=”minimal-ui”>

In Safari on iOS 7.1, a new minimal-ui attribute is added to the meta tag, which allows the address bar at the top and the navigation bar at the bottom to be hidden when a web page is loaded.

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

If you set the option to yes, the website will delete the default Apple toolbar and menu bar in full-screen mode.

<meta name=”apple-touch-fullscreen” content=”yes”>

Enable support for web app programs

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

iPhone will automatically add your text as a link, and will automatically dial the number when you click on it!

telephone=no will ignore the numbers in the page and recognize them as telephone numbers

Telephone=yes turns on the conversion of numbers into dial-up links, which is turned on by default!

<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” />

Control the status bar display style default (white) black (black) black-translucent (gray translucent)

link tag apple-touch-icon

If apple-mobile-web-app-capable is set to yes, then you can use the Add to Home Screen button to add the website to the home screen on Safari on iPhone, iPad, and iTouch.

By setting the corresponding apple-touch-icon tag, the icon added to the home screen will use the image we specified.

The following is to select the best icon for different ox devices. The default size for iPhone is 60px, for iPad is 76px, and for retina screens it is doubled.

<link rel=”apple-touch-icon” href=”touch-icon-iphone.png”>
<link rel=”apple-touch-icon” sizes=”76×76″ href=”touch-icon-ipad.png”>
<link rel=”apple-touch-icon” sizes=”120×120″ href=”touch-icon-iphone-retina.png”>
<link rel=”apple-touch-icon” sizes=”152×152″ href=”touch-icon-ipad-retina.png”>

Before iOS 7, the system will add special effects (rounded corners and highlights) to icons by default. If you do not want the system to add special effects, you can use apple-touch-icon-precomposed.png instead of apple-touch-icon.png.

The priority of icon usage is as follows:

If there is no icon that matches the recommended size for the device, an icon that is larger than the recommended size but closest to the recommended size will be used first.

If there is no icon larger than the recommended size, the icon closest to the recommended size will be preferred.

If there are multiple icons that meet the recommended size, the icon containing the keyword precomposed will be given priority.

If you do not specify an icon in the area using the link tag, the root directory of the website will be automatically searched for a png icon with the prefix apple-touch-icon.

Note: iOS 7 no longer adds special effects to icons. Before iOS 7, special effects were added to icons by default, unless the icon had the keyword -precomposed.png as a suffix.

Internet Explorer

<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> Avoid IE from using compatibility mode

<meta name=”MobileOptimized” content=”320″> Defined width tag set by Microsoft for IE Mobile

The browser will not automatically adjust the size of the file, that is, it is a fixed size and will not stretch or scale with the browser.

<meta name=”HandheldFriendly” content=”true” /> : Whether it is friendly to handheld devices, only true or false

UC Browser

<meta name=”screen-orientation” content=”portrait”> Force vertical screen

<meta name=”full-screen” content=”yes”> Force full screen

<meta name=”browsermode” content=”application”> Application mode

QQ Browser

<meta name=”x5-orientation” content=”portrait”> Force vertical screen

<meta name=”x5-fullscreen” content=”true”> Force full screen

<meta name=”x5-page-mode” content=”app”> Application mode

360 Browser

<meta name=”renderer” content=”webkit”> Turn on fast mode

The meta element provides meta-information about the page, such as descriptions and keywords for search engines and update frequency. The tag is located in the head of the document and does not contain any content. The attributes of a tag define the name/value pairs associated with the document.

What are the features that are unique to mobile phones?

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" 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">

The first meta tag means: force the document width to be 1:1 with the device width, and the maximum document width ratio is 1.0, and do not allow users to click on the screen to zoom in.

• width - the width of the viewport height - the height of the viewport
• initial-scale - the initial scale
• minimum-scale - the minimum scale 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

The second meta tag is a private meta tag for Safari on iPhone devices, which means: allow full-screen mode browsing;

The third meta tag is also a private tag for iPhone, which specifies the style of the status bar at the top of Safari on iPhone;

The color of the status bar (top bar of the screen) in the web app;

The default value is default (white), and can be set to black (black) and black-translucent (gray translucent).

Note: If the value is "black-translucent", it will occupy the page px position and float above the page (it will cover 20px of the page height - 40px for the Retina screen of iPhone4 and itouch4).

The fourth meta tag says: Tell the device to ignore recognizing the numbers in the page as a phone number.

Let's take a look at the mobile page meta of major manufacturers

1. Tmall

<meta name="aplus-terminal" content="1"/>
<meta name="apple-mobile-web-app-title" content="TMALL"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<meta name="format-detection" content="telephone=no, address=no">

2. Taobao

<meta charset="utf-8">

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

<meta content="yes" name="apple-touch-fullscreen"/> 

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

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

3. JD.com

<title>JD.com - Mobile Version</title>

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

<meta http-equiv="Content-Type" content="text/html; charset=GBK">

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

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

<meta name="format-detection" content="telephone=no">
<meta http-equiv="Expires" content="-1">

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

<meta http-equiv="Pragma" content="no-cache">

<meta name="Keywords" content="">

<meta name="description" content="">

4. NetEase

<title>NetEase Mobile</title>

<meta name="viewport" content="width=device-width,initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

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

<meta name="keywords" content="" />

<meta name="description" content="" />

5. Baidu

<meta name="referrer" content="always">

<meta charset="utf-8">

<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

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

6. Sohu

<title>Sohu Mobile</title>
                            
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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

<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

<meta name="MobileOptimized" content="320"/>

<meta name="description" content="" />

<meta name="keywords" content="" />

————————

Simulate mobile web page

<meta name=”viewport” content=”width=device-width,user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0″>

viewport -> window (display area)

width=device-width device width

Viewport

<metaname = 'viewport' content = "width=320">

<metaname = 'viewport' content = "width=device-width">

user-scalable=no/0Whether to allow scaling

initial-scale=1.0 initial value

maximum-scale=1.0

minimum-scale=1.0

———————————————————————————–

<meta name=”viewport” content=”width=device-width, user-scalable=no”>

user-scalable=no/0 Disable user scaling of the page

<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1.0″>

initial-scale=1.0 Initialize the page zoom ratio

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

maximum-scale=1.0 maximum zoom ratio (for individual mobile phones such as Huawei Meta8)

———————————————————————————–

Apple device specific meta:

<!—Allow the web page to run as an app (allow it to be added to the home screen)—>

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

<!—Status bar color—>

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

JD meta:

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

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

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

<!—Other phone numbers and email addresses are prohibited—>

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

Taobao meta:

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

<!–Click on the page area to display in full screen—>

<meta content="yes" name="apple-touch-fullscreen"/>

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

<!– Application information, retain system history, motion effects–>

<meta name="App-Config" content="fullscreen=yes,useHistoryState=yes,transition=yes"/>

Other meta:

<!–Force 360 ​​browser to use chrome kernel to render the page–>

<meta name=”renderer” content=”webkit”>

<!–Try to use the latest IE rendering mode–>

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<!–Optimized for handheld devices, mainly for some old browsers that do not recognize viewport, such as BlackBerry–>

<meta name=”HandheldFriendly” content=”true”>

<!–Microsoft’s old browser–>

<meta name=”MobileOptimized” content=”320″>

<!– uc forces vertical screen–>

<meta name=”screen-orientation” content=”portrait”>

<!– QQ forced vertical screen–>

<meta name=”x5-orientation” content=”portrait”>

<!– UC forced full screen–>

<meta name=”full-screen” content=”yes”>

<!– QQ forced full screen–>

<meta name=”x5-fullscreen” content=”true”>

<!– UC application mode–>

<meta name=”browsermode” content=”application”>

<!– QQ application mode–>

<meta name=”x5-page-mode” content=”app”>

Summarize

The above is the full content of this article. I hope that the content of this article will have certain reference learning value for your study or work. If you have any questions, you can leave a message to communicate. Thank you for your support for 123WORDPRESS.COM.