WEBAPP Meta Tags Daquan, webappmeta tags Daquan

1. First talk about the viewport in the mate tag:

Viewport is the viewable area, for desktop browsers, viewport refers to the area that is used to look at the page after all toolbars, status bars, scroll bars, and so on. For traditional Web pages, the width of 980 on the iphone is normal and full screen, but for WebApp, it may be a bit of a problem, on the iphone our WebApp in the vertical screen is usually 320 width.

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, you set the width=320, the vertical screen when the 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/> set up meat, our page will be rendered so

The name attribute in the 2.meta tag

Name property
(1),
(2),
(3),
(4), Tell the search engine the author of your site's production;

(5),

The properties are described as follows:

Set to all: The file will be retrieved and the link on the page can be queried;

Set to None: The file will not be retrieved, and the link on the page cannot be queried;

Set to index: The file will be retrieved;

Set to follow: links on the page can be queried;

Set to NOINDEX: The file will not be retrieved, but the link on the page can be queried;

Set to Nofollow: The file will not be retrieved, the link on the page can be queried

Main mate uses in 3.webapp

<meta name= "Apple-touch-fullscreen" content= "yes" > Added to the Home screen, full screen display.

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

<meta name= "Apple-mobile-web-app-status-bar-style" Content=black "/>

Defaults are default (white), which can be set to Black (dark) and black-translucent (gray translucent).
Note: If the value "Black-translucent" will occupy the page px position, floating above the page (will cover the page 20px height –iphone4 and itouch4 Retina screen is 40px).

<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black-translucent" >

There are two meta values in iOS, apple-mobile-web-app-capable and Apple-mobile-web-app-status-bar-style, both of which make the Web content appear in the app style and make the status bar transparent.

<link rel= "apple-touch-icon-precomposed" href= "Http://spion.blog.163.com/blog/iphone_milanoo.png"/>
Note: This link is to set the Web App placement on the Home screen icon file path.
Image size can be set to 57*57 (px) or retina can be set to 114*114 (px), ipad size is 72*72 (px)

<meta content= "Telephone=no" name= "Format-detection"/>
<meta content= "Email=no" name= "format-detection"/>//will not recognize mailbox
Tell the device to ignore numbers in the page as phone numbers

<link rel= "Apple-touch-icon" href= "/static/images/identity/html5_badge_64.png"/>
<link rel= "apple-touch-icon-precomposed" href= "/static/images/identity/html5_badge_64.png"/>

iOS with rel= "Apple-touch-icon", Android with Rel= "apple-touch-icon-precomposed". This allows you to create an app-style icon in your phone's home screen when the user saves the page as a bookmark.

<meta name="sharecontent" data-msg-img="thumbnail address" data-msg-title="title" data-msg-content ="Introduction" data-msg-callback= " data-line-img=" thumbnail address " data-line-title=" title " data-line-callback=""/>

Share page settings

The role of <meta> tags inside HTML tags

The <meta> element provides meta-information about the page (meta-information) such as author, date and time, page description, keywords, page refresh, and so on. Not specifically for search engines.
But one of the keyword and description is a way for search engines to find web pages.

What is the concept of meta tags, title tags, description tags, and keyword tags in html? What if these tags are applied?

?“ <META> "(That is, the META tag that is commonly referred to). Meta tags are used to describe the properties of an HTML page document, such as author, date and time, page description, keywords, page refresh, and so on.

?? In the content of web marketing methods such as search engine registration, search engine optimization rankings, and so on, it is often necessary to talk about the role of meta tags, we can even say that meta tag content design for search engine marketing is a key factor, especially the "description" (page description) and "Keywords" (keywords) two attributes are more important "see the Web Marketing teaching website for the introduction: Description Keywords". The content design of the META tag is still important, although the search results are rarely dependent on the contents of the META tag, even though today's search engine retrieves information.

About the http-equiv in meta tags

?? One of the examples in the HTML code is

?? <meta http-equiv= "Content-type" content= "text/html; charset=gb2312 ">

?? The function is to specify that the current document uses a character encoding of gb2312, which is the simplified Chinese characters. According to this line of code, the browser can recognize that the page should be displayed in Chinese characters. Similarly, if "gb2312" is replaced with "Big5", we are familiar with the Chinese traditional characters.

?? HTTP-EQUIV is used to provide some descriptive information to the browser so that it can be based on these instructions. HTTP-EQUIV is not only a description of the role of the character encoding of the page, commonly used HTTP-EQUIV types include: page expiry time, the default scripting language, the default Style page language, automatic page refresh time and so on.

About the "description" in the META tag

?? The code in the HTML code example for "description" is:

?? <meta name= "description" content= "Network Marketing Teaching website provides" Network Marketing Foundation and practice "teaching support: Network Marketing courseware, Network marketing paper, Network Marketing experiment Teaching, e-commerce paper, Network Marketing and e-commerce books, etc." >

??" Description "In the content=" page description, is a page overview of the introduction, this information may appear in the search results, it is necessary to design according to the actual situation of the Web page, as far as possible to avoid the content of the page is not related to the "description", in addition, It is best to have a corresponding description of each page (at least the same column of the page has a corresponding description), rather than the entire site is the same description of content, because a site has multiple pages, the content of each page must be different, if using the same description, Obviously there will be some Web page content is not directly related, this not only not conducive to search engine rankings of the page, it is not conducive to users based on the information in the search results to determine whether to click into the site for further information.

About the "Keywords" in the META tag

?? Similar to "description" in the META tag, "Keywords" is also used to describe the properties of a Web page, except that the content to be listed is "keywords" rather than the introduction of the Web page. This means choosing the right keywords based on the theme and content of the page. In the choice of keywords, in addition to consider the core content of the Web page, but also the user is easy to retrieve through the search engine, too uncommon vocabulary is not very suitable for the keywords in the META tag. About the meta tags in the design of keywords, should be careful not to pile up too many keywords, listing a large number of keywords for search engine retrieval is not much significance for some of the hot areas

WEBAPP Meta Tags Daquan, webappmeta tags Daquan