[GO] Mobile Web HTML header information interpretation and viewport meta tag interpretation

<MetaCharSet= "Utf-8" /><Linkrel= "shortcut icon"href= "Favicon.ico"type= "Image/vnd.microsoft.icon" /><Metaname= "Generator"content= "lixiphp (http://lixiphp.com)" /><Metaname= "Viewport"content= "Width=device-width, initial-scale=1"><Metaname= "Mobileoptimized"content= "width"><Metaname= "handheldfriendly"content= "true"><Metaname= "Apple-mobile-web-app-capable"content= "Yes"><Metahttp-equiv= "ClearType"content= "On"><Metahttp-equiv= "X-ua-compatible"content= "Ie=edge, chrome=1">

Define separately:

1, encoded Unicode UTF-8

2. Browser icon address and type

3. Generator Producers

4, Web page scaling is 1:1

5, control the phone layout, width defaults to screen size, can also be specific numbers such as 240, 480,windows Mobile recommended set to 240

6. Control the mobile phone to enlarge and reduce the page display

7. Control full-screen display (Apple Safar)

8, ClearType is mainly for LCD LCD display design, can improve the definition of text.

9. Compatibility

What is viewport

The mobile browser is to put the page in a virtual "window" (viewport), usually this virtual "window" (viewport) wider than the screen, so that you do not have to squeeze each page into a very small window (this will destroy the layout of the page without the optimization of the mobile browser), Users can view different parts of a Web 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.

Viewport Foundation

A common viewport meta tag for pages optimized for mobile pages is as follows:

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

Width: Controls the size of the viewport, you can specify a value if 600, or a special value, such as device-width for the width of the device (in pixels of the CSS when scaled to 100%).
Height: corresponds to width, specifying height.
Initial-scale: The initial zoom ratio, which is the scale at which the page is first load.
Maximum-scale: Allows the user to zoom to the maximum scale.
Minimum-scale: The minimum scale to which the user is allowed to zoom.
User-scalable: Whether the user can manually scale

Some questions about the 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.

The above knowledge, I believe that each viewport a little understanding of the students should have already understood. That's not the point I want to talk about today. I would like to explain some of the differences between viewport on iOS and Android.

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

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

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. The students who play PS should know that when you zoom a picture of 1000 * 1000 directly to 500 * 500, what does it look like? The distortion of the picture must not escape.

But one of the applications I'm going to do is the opposite, using viewport and scaling. Regardless of the actual resolution, regardless of the physical size, I would like to have a unified resolution in the browser, but also do not allow users to zoom. The devices I used to test were: iphone4, ipad2, HTC G11, not knowing what the manufacturer's Aquos phone (Android), Asus Android Pad, Dell's Winphone then I encountered the following problems:

1) If viewport is not displayed, the default width is 980. If all elements of the page are less than 980 wide, width is 980, and width is equal to the maximum width if the page has the widest position over 980. In summary, the default is to display the entire page from left to right. If viewport is set up, for example, only the User-scalable=no is set, for example <meta name= "viewport" content= "User-scalable=no"/> Then the iOS width is still 980 (that is, by default, DPI scaling), but Android and Winphone are no longer scaled, and the browser resolution is the same as the true setting resolution.

2) for iOS devices, setting width can take effect, but for Android, setting width does not take effect. iOS device, the scaling ratio that DPI is automatically calculated by the width you set and set the real resolution, while Android under you set width is invalid, you can set a special field target-densitydpi, About TARGET-DENSITYDPI can refer to this article: http://hi.baidu.com/j_fo/blog/item/748361279ebccd18908f9d7d.html. In other words, there are three variables: browser width, device true width, dpi. Let's simply use a formula to express the relationship between them (not real relationships, simple instructions) device true width * dpi = browser width, here are three variables, device real width is a known value we can not operate, the other two variables we may set one to affect the other, In iOS, we can change the browser width,dpi automatically generated, and in Android, we can change the DPI, browser width automatically generated. For Android, no matter how we set the width, we don't have any effect on the width of the browser.

PS: Here I say another strange question: in the HTC G11 (HTC's phone I only this one, nothing else), if the DPI is set to not display the width, then user-scalable=no does not take effect, that is to say: <meta name= " Viewport "content=" Target-densitydpi=300,user-scalable=no "/>, the user cannot be prevented from scaling the screen. We need to set the width value of the display, only this value on the Android browser resolution screen does not have any impact (on iOS or will have an impact), we still have to set it, and this value must be greater than 320, if less than or equal to 320, It is not possible to make user-scalable=no effective. This issue only appears on HTC's G11 phone, not in Aquos phone. Compatible with Android it's a headache. @[email protected], the future does not know how many pits it. And on the winphone, the result is even more strange: I give viewport width set a value greater than 480, User-scalable=no is invalid, and set a value less than 480, User-scalable=no can take effect. But no matter how much I set the width of the viewport, the true width of winphone does not have the effect I expected, through target-densitydpi. Set width, if less than 480, the screen will zoom, but the scale is not as I expected, I do not know how it is scaled according to the law. It is not known whether this is a winphone issue or a Dell implementation issue.

3) This and the previous should be directly related: The iOS device in the vertical and horizontal screen, will automatically adjust the DPI, whether horizontally or vertically screen, can ensure that the browser width is equal to the value set in the viewport, so when the screen, the page displays the size of the content will be automatically scaled to produce changes. While the Android phone in the screen at the same time, will not change the DPI, in the screen at the same time, the page will not produce zoom. As a result, iOS can guarantee that the horizontal screen page will not produce scroll bars, full screen display, and Android can not guarantee this point, vertical full screen is not full screen, and vice versa.

4) for iOS devices, if the width display is defined and the width of the page is wider than width, the width is not valid and is still displayed at the widest width (no scroll bars). But at this point there will be a very strange problem, when you switch the phone in the same screen a few times, you will find that your page is automatically enlarged, there is a scroll bar, but in fact, the width of the enlargement and you have not related. To prevent this from happening, you need to set the width wide to be larger or the same as the widest part of the page.

Transfer from http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html

Determine whether the page to crawl is a wise page or a PC page if you want to determine whether a page is a wise page or a PC page, there are two ideas: the first is to find some physical features, including two, one is the characteristics of the URL, such as the URL prefix is WAP, M, 3g, 5g, 4g, etc. the second is the HTML tag , such as viewport meta attributes: <meta content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no" Name= "Viewport"/><!--small Display interface original size display--
<meta content= "yes" name= "apple-mobile-web-app-capable"/> <!--iphone allows full-screen mode browse-
<meta content= "Black" name= "Apple-mobile-web-app-status-bar-style"/><!--the status bar style of Safari top in the specified iphone--
<meta content= "Telephone=no" name= "format-detection"/><!--tell the device to ignore numbers on the page as phone numbers--the second is the training classifier, The page type is automatically judged by the labeled PC page and the Wise page training classifier. There is no good idea of the choice of features here. The sense of Web page type and the degree of the specification of the page is very much related to irregular web pages, through the physical characteristics of the identification type accuracy may be very low.

Here are some of the phone's Web pages:

One, <meta name= "viewport" id= "viewport" content= "Width=device-width, initial-scale=1" >

This meta tag is added to the head of the Web Phone wap2.0 Web page, and the page will be displayed in its original size in the iphone's browser and does not allow zooming.
<meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, User-scalable=no ">
The height of the width-viewport width height-viewport
Initial-scale-Initial zoom ratio
Minimum-scale-Minimum scale to allow the user to zoom
Maximum-scale-Maximum scale to which the user is allowed to zoom
User-scalable-whether the user can manually scale

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

When the HTML page is browsed on the phone, the label is used to specify whether to display the phone number in the page content as a dial-up hyperlink.

The default value on the IPhone is:

<meta name= "format-detection" content= "Telephone=yes"/>

If you don't want your phone to automatically display the phone number in your page as a dial-up hyperlink, you can write:

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

Third, <meta name= "apple-mobile-web-app-capable" content= "Yes"/>

Description: The website opens support for Web apps.

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

Description

• The color of the status bar (the top bar of the screen) in the web App app;
• 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).

！！！！ Other settings for Apple Web App:

Of course, the icon and launch interface with the Web App require additional two-terminal code to set, as follows:

<link rel= "apple-touch-icon-precomposed" href= "Iphone_milanoo.png"/>

Description: This link is to set the Web app's placement on the Home screen icon file path

Use:

• This path needs to be noted in the root directory of the document that is placed under the document root of the Web site but not the server.
• Image size can be set to 57*57 (px) or retina can be set to 114*114 (px), ipad size is 72*72 (px)

<link rel= "apple-touch-startup-image" href= "milanoo_startup.png"/>

Note: This link is to set the start-up interface (image five), and put the same path as above.

Use:

• This path needs to be noted in the root directory of the document that is placed under the document root of the Web site but not the server.
• The official requirements of the start interface must be 320*640 (px), originally thought that the retina screen can support double, but not support, the picture does not appear.

Five,<meta name= "Apple-touch-fullscreen" content= "yes" >"Add to 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 content= "Telephone=no" name= "Format-detection"/>
<meta content= "Email=no" name= "format-detection"/>//will not recognize the mailbox
Tell the device to ignore numbers in the page as phone numbers
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.

[GO] Mobile Web HTML header information interpretation and viewport meta tag interpretation