Mobile code optimization

PC-Side Page

<meta name= "mobile-agent" content= "format=html5;url=http://mobile page/"/>/meta Callout Declaration

<meta name= "Applicable-device" content= "PC" >

Top of the title

<meta http-equiv= "Cache-control" content= "No-siteapp"/>

<meta http-equiv= "Cache-control" content= "No-transform"/>/prohibit transcoding declaration

Mobile-Side Page

<link rel= "canonical" Href= "HTTP://PC End page/" >/meta Callout Declaration

<meta name= "Applicable-device" content= "mobile"/>

Top of the title

<meta http-equiv= "Cache-control" content= "No-siteapp"/>

<meta http-equiv= "Cache-control" content= "No-transform"/>/prohibit transcoding declaration

--------------------------------------------------------------------------------------------------------------- ---------------------

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

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

<meta name= "viewport" content= "Width=device-width, minimum-scale=1.0, maximum-scale=2.0" >

<link rel= "shortcut icon" href= "/favicon.ico"/>

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

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

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

<meta name= "Apple-mobile-web-app-title" content= "Jackie Original mobile Version"/>

--------------------------------------------------------------------------------------------------------------- ---------------------

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

Apple-mobile-web-app-capable

Apple-mobile-web-app-capable properties and meanings in meta tags this meta is about deleting 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 http-equiv= "Cache-control" content= "max-age=0"/>

Cache-control max-age=0

The Cache-control no-cache-forces each request to be sent directly to the source server without a checksum of the locally cached version. This is useful for verifying the authentication application (can be used in conjunction with public), or is strictly required to use

Application of the latest data (all the benefits of using the cache at the expense of)

Pragma when "No-cache" appears in the request message, the application should push the request to the original server, even though it has already cached a copy at the time of the last request. This will ensure that the client receives the most authoritative response. It is also used to force a copy to be flushed when the client discovers that the copy in its cache is unavailable or expires.

Cache-control

Max-age>0 is extracted directly from the browser cache

When Max-age<=0 sends an HTTP request acknowledgement to the server, if the resource has any modifications, it returns 200, or 304 if none.

--------------------------------------------------------------------------------------------------------------- ---------------------

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

Format-detection attributes and meanings in meta tags format-detection translated into chinese means "format detection", as the name implies, it is used to detect some formatting in the HTML,

The format-detection attribute of meta is mainly the following settings:

Meta name= "format-detection" content= "Telephone=no"

Meta name= "format-detection" content= "Email=no"

Meta name= "format-detection" content= "Adress=no"

You can also ligatures: Meta name= "format-detection" content= "Telephone=no,email=no,adress=no"

Here are the specific functions of each setting:

Telephone 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 is forbidden to convert 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!

Second, the email tells the device does not recognize the mailbox, after clicking do not automatically send email=no prohibited as an email address! Email=yes opened the text default to the email address, this meta will not have to write, in the default is the case is open!

Third, adress adress=no forbidden to jump to the map! Adress=yes opens the function of clicking the address to jump directly to the map, in the default case it is open!

--------------------------------------------------------------------------------------------------------------- ---------------------

Apple-mobile-web-app-status-bar-style attributes and meanings in meta tags

The two methods are as follows:

Status-bar-style:black

Status-bar-style:black-translucent

--------------------------------------------------------------------------------------------------------------- ---------------------

<meta name= "viewport" content= "Width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, User-scalable=no "/> Through the collection of information, a general understanding of the meaning of the viewport attribute.

First, what is viewport mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) than the screen width, so that you do not have to squeeze each page into a very small window, will not destroy no needle opponents The layout of the Web page optimized by the Machine browser, users can view different parts of the page by panning and zooming. The mobile version of Safari has recently introduced the viewport META tag, which allows web developers to control the size and scale of viewport, as well as the basic support of other mobile browsers.

Ii. Viewport Foundation A common viewport meta tag for pages optimized for mobile pages is as follows:

1, Width: Control the size of the viewport, you can specify a value, such as 600, or a special value, such as device-width for the width of the device (in pixels that are scaled to 100% CSS)

2, Height: and width correspond, specify the height

3, Initial-scale: The initial scaling ratio, the first time the page loads the scale

4, Maximum-scale: Allow the user to zoom to the maximum scale, ranging from 0 to 10.0

5, Minimum-scale: Allow the user to zoom to the minimum scale, ranging from 0 to 10.0

6, User-scalable: Whether the user can be manually scaled, the value can be: ①yes, True allows the user to zoom, ②no, False does not allow the user to zoom

Iii. some questions about viewport viewport is not just a unique attribute on iOS, it also has viewport on Android and Winphone. The problem they are trying to solve is the same, ignoring the true resolution of the device, directly through the DPI, resetting the resolution between the physical size and the browser, which is independent of the resolution of the device. For example, you take a 3.5 inch-320 * 480 Iphone3 GS, 3.5 inch-640 * 960 of iphone4 or 9.7-inch -1024*768 ipad2, although the device resolution is different, the physical size is also different, But you can set viewport to have the same resolution in the browser. For example, your site is 800px wide, and you can set up viewport's width=800 to make your site appear on all three different devices on a full screen.

Online a search about viewport knowledge, basically all is the following information:

This code means that the width of the viewport is equal to the real resolution on the physical device and does not allow the user to scale. A mainstream web app is so set, its role is to deliberately discard viewport, do not scale the page, so DPI affirmation and the true resolution of the device is the same, do not do any scaling, the Web page will therefore appear higher and more delicate.

Mobile code optimization