Mobile development accumulation--meat,viewport

1. <meta> can provide meta-information about the page, such as descriptions and keywords for search engines and update frequency

Common functions: ① Document description, write developer and development documents or tools

                  ②Keywords, you can write document keywords

                  ③ Redirect, for example, when the URL has been changed, redirect the user to another address. example:

               

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />

              5 seconds after the page is loaded, it will automatically jump to the predefined URL

 

 

Metadata is always passed in name/value pairs.

Required attribute: content defines meta information related to http-equiv or name attribute

Optional attribute: http-equiv associates the content attribute with the HTTP header

            name associates the content property with a name

 

            scheme defines the format used to translate the value of the content attribute.

 

 

 

 

 

2.Meta viewport attribute description (mark)

Mobile browsers place the page in a virtual "viewport", usually the virtual "viewport" is wider than the screen, so that each page does not have to be squeezed into a very small window (this will break the layout of web pages that are not optimized for mobile browsers), users can pan and zoom to see different parts of the page. The mobile version of the Safari browser has recently introduced the viewport meta tag, allowing web developers to control the size and zoom of the viewport, and other mobile browsers also basically support it.

 

Viewport Basics

A common viewport meta tag for a page optimized for mobile web pages looks like this:

<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>

width: controls the size of the viewport, a value that can be specified, if 600, or a special value, such as device-width is the width of the device (the unit is CSS pixels when the zoom is 100%).
height: Corresponding to width, specify the height.
initial-scale: The initial scaling ratio, that is, the scaling ratio when the page is loaded for the first time.
maximum-scale: The maximum scale to which the user is allowed to zoom.
minimum-scale: The minimum scale to which the user is allowed to zoom.
user-scalable: whether the user can manually scale

 

 

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326369009&siteId=291194637