Speaking before the viewport, to introduce a concept, that is,
css is not equal to the device 1px 1px
In the css we generally use px as a unit, css in the desktop browser, a pixel often corresponds to a physical pixel computer screen, but this one pixel css with physical pixel pixel pixel is two things .
css only pixels in an abstract unit, or the different devices in different environments, the physical device represented by the pixel 1px css is different. At the same time, different devices pixel density different, along with their physical screen pixel will be different.
There is also cause changes in the user's zoom px css of, for example, when the user double page magnification, css physical pixels that are represented 1px also doubled; and vice versa. From this perspective, it is relatively easy to understand - in short, is to first understand the css of 1px 1px with physical pixel is two things matter. Then you can tell the viewport.
1. What is the viewport
To quote here a description used rookie tutorial
viewport is visible area of a user's web page.
viewport translated into Chinese can be called "viewport."
Mobile browser is the page in a virtual "window" (viewport) usually this virtual "window" (viewport) wider than the screen, so you do not have to squeeze every page a small window (this will no damage layout for mobile browser optimized page), the user can pan and zoom to see different parts of the page.
Popular speaking, the screen on the device viewport is a mobile device that can be used to display an area of our web page, a little more specific, that part of the area is used to display a web page on the browser, but not limited to the browser viewport visual size of the area, it may be larger than the visible area of the browser, it may be larger. Generally, viewport on the mobile device is larger than the visible area of the browser. In other words, viewport usually on a mobile device than its width of the viewable area of the larger (viewport width of the viewable area than oh), also will be horizontal scroll bar or some other strange things. So that is what we need to set the value of the viewport of friends.
2. Set viewport meta tag by
Mentioned before, I wrote in the meta tags
<meta name="viewport" content="width=device-width, initial-scale=1.0">What is that mean?
Take a look at the next table it
| width | The width of the layout viewport is provided for a positive integer, or string "device-width" |
|||
| initial-scale | The initial value of the scaling of pages, a number that can be decimals | |||
| minimum-scale | The minimum scaling value allows the user, a number that can be decimals | |||
| maximum-scale | Allowing the user maximum scaling value for a number, it may be decimals | |||
| height | Set the height layout viewport, this property is not important to us, rarely used | |||
| user-scalable |
Whether to allow the user to zoom, is "no" or "yes", no representatives are not allowed, yes to allow representatives | |||
These properties can be used simultaneously, can be used alone or in combination, on the list are separated by commas multiple attributes simultaneously.
A closer look, Huh? The layout viewport is what the hell?
Do not worry do not worry, I'll explain
Large foreign god ppk think there are three viewport on mobile devices
layout viewport 、visual viewport 和 ideal viewport
Specific look at his three articles:
layout viewport width can be obtained by document.documentElement.clientWidth
visual viewport width can be obtained by window.innerWidth
This figure is below
Here pretend you understand, I will not elaborate on the two viewport
Focus is ideal viewport
Ideal viewport viewport is moving over the device, it does not have a fixed size, different devices have different ideal viewport. ideal viewport width equal to the width of the screen of the mobile device.
Significance ideal viewport that, no matter under what resolution screen, those sites designed for ideal viewport, does not require the user to manually zoom, horizontal scroll bar does not need to be present, it can be perfectly presented to the user.
3. The current viewport width is set to the width of the viewport Ideal
To get the ideal viewport width must be the default layout viewport is set to the screen width of mobile devices. Because the meta viewport in width to control the width of the layout viewport, so we just need to width to device-width of this special value on the line.
<meta name="viewport" content="width=device-width">But this writing, to be noted that, on the iPhone or iPad, either portrait or landscape mode, ideal viewport width is the width of the vertical screen
The following written and can achieve the same effect on a code, it can also become ideal viewport the current viewport
<meta name="viewport" content="initial-scale=1">Because the scaling is relative to the ideal viewport to zoom in , zoom value of 1 when it does not get the ideal viewport Well
But write, you turn on IE either portrait or landscape screen width to regard the portrait of the ideal viewport
then what should we do?
Here we must know that
When the width and initial-scale occur simultaneously, the browser will take them in the larger of the two values
Therefore, the perfect solution is
<meta name="viewport" content="width=device-width, initial-scale=1">
There may be more in-depth understanding of knowledge in the following link in ~