For the desktop platform Web layout Everyone is familiar with meta tags, it is always located inside the head element, to do SEO friends must have a special affection for meta, today we say mobile platform META tag, on the mobile platform META tag What are the magical effects?
1. Meta-Viewport
When it comes to mobile platform meta tags, you have to say viewport, so what is viewport?
Viewport is the viewable area, for desktop browsers, viewport refers to the area that is used to look at the page after removing all toolbars, status bars, scrollbars, and so on.
。 For traditional Web pages, the width of 980 on the iphone is very normal and full screen, but for WebApp, may be a bit of a problem, on the iphone our WebApp in the vertical screen is usually 320 width, What is the effect of our 320 page on the iphone? Some people may think that the iphone is not 320 of the width of MO, it should be full screen it, the fact? Let's look at the display of the following layout on the iphone
<! DOCTYPE html>
<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>
<body>
<div>
Appue
</div>
</body>
Show on iphone
So we have to change the viewport, we have the following property values can be set:
Width:viewport width (range from 200 to 10,000, default is 980 pixels)
Height:viewport height (range from 223 to 10,000)
Initial-scale: Initial zoom ratio (range from >0 to 10)
Minimum-scale: The minimum scale to allow the user to zoom
Maximum-scale: Allows the user to zoom to the maximum scale
User-scalable: Whether the user can manually scale
For these properties, we can set one or more of them, do not need to be set up at the same time, the IPhone will automatically calculate the other property values based on the properties you set, rather than the default values directly.
If you put initial-scale=1, then width and height in the vertical screen automatically for 320*356 (not 320*480 because the address bar occupy space), horizontal screen automatically for 480*208. Similarly, if you set the width only, the Initial-scale and height will be calculated automatically. For example, if you set the width=320, the vertical screen Initial-scale is 1, horizontal screen when it becomes 1.5. So how do these settings make Safari aware? In fact, it's very simple, just a meta, shaped like:
<meta name= "viewport" content= "width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0; "/>
After setting the meat, our page will be rendered as follows:
OK, we can be in full screen layout of our page, no longer worry about the page display is very small!
2. Meta-Format-detection
<meta name= "format-detection" content= "Telephone=no"/>
You write a bunch of numbers without a link style, and the iphone will automatically add your text link style, and click on this number will automatically dial! Want to get rid of this dial-up link how to do it? Then our meta is prowess again, the code is as follows:
Telephone=no banned the conversion of numbers to dial-up links!
Telephone=yes turned on the number into a dial-up link, to turn on the conversion function, this meta will not have to write, in the default is the case is open!
3. Meta-Apple-mobile-web-app-capable
<meta name= "apple-mobile-web-app-capable" content= "yes"/>
The META function is to delete the default Apple toolbar and menu bar. The content has two values "yes" and "no", and when we need to display the toolbar and menu bar, the row meta is not added, the default is display.
The case of the meta was added
4. Meta-Apple-mobile-web-app-status-bar-style
<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 effect is to control the status bar display style
Status-bar-style:black
Status-bar-style:black-translucent
META tags on mobile platforms-----magical effects
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
