Mobile Web Viewport related knowledge

Knowledge of mobile Web viewport is primarily about transduction. This article focuses on one question: How do I set <meta name= "Viewport"> Related parameters When I cut graphs? The viewport is explained around this issue.

First, viewport "viewport is the layout viewport" concept

The viewport of a mobile device is a piece of area on the device screen that can display a webpage.

The area of the display page may be larger than the viewable area of the browser, or it may be smaller than the viewable area of the browser, and can be set transduction. By default, the viewport of mobile devices is larger than the viewable area of the mobile device browser, primarily to enable the display of PC-side pages on mobile devices.

The mobile device browser will have a default viewport value that may be 980px,1024px or other value, determined by the device.

Mobile browser to display the PC page by default do two things, first render the page in 980px layout viewport, and then zoom on the phone screen display, so that users see the full picture of the page.

But we don't use this default 980px to lay out the mobile side transduction, mainly because
* Width is not controllable, different system different device default value viewport may be different
* PAGE DOWN version explicit, interactive unfriendly
* links are not available.
* There are zooming, zooming and scrolling, the interaction is not friendly.

and user scaling causes the PX and DP correspondence to change, the page magnification is one-fold, then the CSS in 1px represents the physical pixels will increase by one times, the page is reduced by one times, the CSS 1px represents the physical pixels will be reduced by one.

So with the default 980px layout is very irregular, then transduction in order to typesetting the correct, how do we do? We will use the <meta> tag, the following step by step.

Ii. layout viewport and visual viewport

1. Layout viewport

Browser default viewport called Layout viewport, this layour viewport can be obtained by Document.documentElement.clientWidth . (Very important for front-end transduction)

2. Visual Viewport

The width of layout viewport is greater than the width of the viewable area of the browser, and a viewport is required to represent the size of the viewable area of the browser (not too important for front-end transduction), a viewport called visual viewport.

The width of the visual viewport can be obtained by Window.innerwidth .

3, Ideal viewport

Visual viewport represents the width of the viewable area of the mobile device browser, layout view in order to show that the PC-side page is set to a large, now mobile development so fast, but also need a perfect fit mobile device viewport. This perfect fit viewport user does not need to zoom, and does not need a horizontal scroll bar to see all the contents of the site normally. This ideal viewport is the ideal viewport for mobile devices.

The width of the ideal viewport is equal to the screen width of the mobile device.

Third, the use of meta-tags to control the viewport

The default viewport on the mobile side is the layout viewport, which is the viewport that is wider than the screen, and transduction need to make this default layout viewport into ideal viewport. This is the role of <meta> tags in mobile development.

<name= "Viewport"  content= "Width=device-width, initial-scale=1.0, maximum-scale=1.0, User-scalable=no ">

This meta reset layout viewport is the width of the device, so let's do it in ideal viewport when we cut it, instead of using the default layout viewport to cut the graph.

The meta viewport tag was first introduced by Apple in its Safari browser to address the viewport problem of mobile devices. Later on, Android and the big browser vendors followed suit and introduced support for Meta viewport, which proved to be very useful.

In Apple's specification, Meta viewport has 6 attributes (for the moment, those things in content are called attributes and values), as follows:

Width	Sets the width of the layout viewport , as a positive integer, or the string "Width-device"
Initial-scale	Sets the initial zoom value of the page, which is a number that can be taken with decimals
Minimum-scale	Allows the user's minimum zoom value to be a number that can be taken with decimals
Maximum-scale	Allows the user's maximum zoom value, which is a number that can be taken with decimals
Height	Sets the height of the layout viewport , which is not important to us and is seldom used
User-scalable	Whether the user is allowed to scale, the value is "no" or "yes", no is not allowed, yes means allow

The author starof, because the knowledge itself in the change, the author is also constantly learning and growth, the content of the article is not updated regularly, in order to avoid misleading readers, convenient tracing, please reprint annotated source: http://www.cnblogs.com/starof/p/5443445. HTML has a problem welcome to discuss with me, common progress.

Extended reading:

PPK the study of viewport on mobile devices (first, second, third).

Mobile Web Viewport related knowledge