viewport into shallow
I believe all web developers have seen or will used this magic head meta tags, or will not understand or in the case of half-mask to use it.
First to solve a doubt, on the map
chrome handheld device simulator I believe we are too familiar, then the upper left corner of 320 * 480 is a horse of God? A lot of people have in mind should have an answer.
Prior to solve the doubts need to introduce a concept:
A pixel is not a pixel is not a pixel
Reference W3cplus this either-pixel pixel in a sentence
Yes, would like to note here is 320 * 480 px refer to your device, rather than the CSS dpx
As for what difference does it?
Of course there are differences! :
px apparatus A unit refers to measure sizes of the apparatus, and px we often used in the web application is used to measure the relative sizes of the elements in the application for the Web application development, is an abstract concept and the front of the device do not take the presence of pixels are two of Karma.
So why, when we use the css px width to design your pages when using the device on the same time be able to get a good visual effect of it, listen to me slowly come.
We look at
About viewport of the relevant declaration syntax
<meta name="viewport" content="name=value,name=value">First, under reference ppk English interpretation of article (most from this source on the network):
Directives
Every name/value pair is a directive. (The word is my own invention.)
There are six of them in total:
width
Sets the width of the layout viewport.
initial-scale
Sets the initial zoom of the page AND the width of the layout viewport.
minimum-scale
Sets the minimum zoom level (i.e. how much the user can zoom out).
maximum-scale
Sets the maximum zoom level (i.e. how much the user can zoom in).
height
Is supposed to set the height of the layout viewport. It is not supported anywhere.
user-scalable
When set to no prevents the user from zooming. This is an abomination that MUST NOT be used.
Do not understand? Well I got (a little tough'll excuse translation) a translation:
指令
每对键值对都是一个指令，（ppk 大神的叫法）以下总计共有6对：
width
设置layout viewport的宽度（css px）
initial-scale
设置页面的初始缩放比例同时可以设置layout viewport的宽度
minimum-scale
设置最小缩放比例（指用户能够缩小到多小）
maximum-scale
设置最大缩放比例（指用户能够放大到多大）
height
设置layout viewport的高度，但暂时不怎么被支持
user-scalable
设置是否允许用户放大缩小。ppk 指出这个属性很邪恶，最好别用（偷笑）
See here probably has kept the layout viewport is half what the hell?
ppk Great God mean, imagine after we set up under viewport, the browser can generate three kinds viewport respectively Visual viewport , layout viewport and Ideal viewport .
Here I'm not going doped too much of these theories, just want a simple way to explain (Fudge) the use viewport what will happen if interested ppk Great God of these theories can go here
1.A tale of two viewports — part one
2.A tale of two viewports — part two
3.Meta viewport
After grammar learned about the case the next step is to explain the viewport
When not using the viewport we have designed for the pc website on a handheld device is kind of how
Get here do Baidu example of pc version (Version no pc because the viewport) Baidu first open state in the non simulator simulator then switches to state
We can see that the whole pc version of the page is compressed to a width of only 320px (non-css units) devices, normal no way to use it?
Well, this time the width of the page is how much (css px)?
We select the html element, see the bottom right corner of the box styles can clearly see the current page width is 980px (css px)
That 980px browser shows a page in the case of only 320dpx (dpx obvious that here is not with the px 1: 1 relationship)
But we have not seen in the lower left corner from the width html style sheet, then 980 px wide html this is where's it
The answer from the viewport! Do not forget the top viewport grammar, that is to say viewport width is set to 980px, but not to say that in front of this example uses pc end of Baidu's page viewport is not it?
That set the width of the viewport where's it, see here believed to have someone have the answer, right when you do not set the viewport when the browser will automatically use the default values for you then the default value is the number?
Here got ppk test
What does that mean in fact means that in case of default (for handheld end) If you had not set the viewport then I will use the browser viewport width from a device based on my decision is.
Knowing this was not enough, so why do I have to set the width of the viewport after html will use the width of it:
It can be understood, viewport is a presence beyond the html element, when no width is set to html, when the width of the html successor to the width of the viewport settings
Take w3cplus For example:
And above take the same pc version of the test, there is no default viewport to view the html really is 980px width
Next, set the width to 50% html element can see the effect of its width is 490px
Here we can draw a conclusion:
viewport is actually a set number of CSS px web content display in the width of the current equipment
The previous example we have seen when html document width less than the viewport is what kind of effect will be, so if you set the width of the html in turn is larger than the viewport is what effect it will
Here is 2000px width setting html page can be seen that there has been rolling effect.
Here again we come to a conclusion:
When the width is less than the width of the viewport html document to the actual width of the document shall prevail, the document is less than the width of the viewport is not part of the display, when the width of the html document is greater than the viewport, you can see the size of the area is still the viewport area, but you can slide or scroll the page to see the content is greater than the area of the viewport
At this point we already know the relationship between the width of the device and the actual document width and the viewport.
Through the above examples we know basically the default viewport width is 980px, and html documentation browser's viewport will be the size of the device into a limited width (the browser dynamically calculates the layout and content of the document), so we see things are very small.
So we want to clear the contents of the document to see how to do, yes, reduce the size of the viewport, what principle?
When we narrow the width of the viewport less of the time also corresponds to the width of the document is reduced, that is the same width of the device, show me something (this time the browser recalculate the document layout and content) results can be seen that the font is magnified the contents are magnified!
Here is an example take W3CPlus site do: take the pc version of the same document without viewport into the handheld devices, no way to see the content
So this time I enter a code in the console:
document.head.insertAdjacentHTML('afterbegin','<meta name="viewport" content="width=320">');
This time it is not a lot of clear ~.
I know this principle, that we want to reduce the size of the viewport How small is better? And the answer is as wide as the width of your equipment. But not every handheld device is 320dpx wide ah, this time we can write viewport head:
<meta name="viewport" content="width=device-width">
This will automatically calculate the width of your device, there should be applause here ~
But this time is not over, that's when you put your original 980 became 320 wide reset the page width page layout that will change the course, miserable, not into the head, this time you have to test everyone's css skills, and how to avoid is not within the scope of this article to discuss.
Extended Thinking
1. When we zoom in on a handheld device when reducing the page, what happened?
2. The relationship between the width and the resolution of the device? Why do we do when drawing iphone to page 640, but only 320?
Explanation:
1.
When we zoom in on a handheld device when the size of the device unchanged (nonsense), the size of the viewport does not change, does not change the size of html, what that change is?
We know that when we set the <meta name="viewport" content="width=device-width">width of the page is consistent with the width of the device reached 1: 1 relationship
actually become your viewable area is large ppk God said visual viewport, put aside his theory, simply means that, you when you are amplified trigger actions, the width of each page css px corresponding to the pixel width of a plurality of devices (here leave aside resolution), so you can see the elements may be exaggerated, but due to the limited width of the device so you see the content will be less, but not in the viewport Once we set up manually modify the words are included here will not change.
Therefore, narrowing caused by the same principle.
2.
Relationship px and the resolution of the width of the device?
In the absence of screen retina appear in addition to some high-definition screen, the pixel width and resolution of most handheld devices is one to one relationship until the retina screen break this pattern appears a device corresponding to the width of two or a lot of resolution pixel rate, triggering what result? Clearer of course, because the more pixels used to express the same apparatus a width of the pixel content. More details can explore on their own degree of your mother more.
Explain the relationship between the picture and the resolution of the understanding of the relationship between the width of the device and resolution, usually the picture corresponding to the resolution of the pixel is, so designers design with a picture resolution of 640 ps at the time also corresponds to our starting width of the device 320 (as previously explained to a device retinal screen pixel will correspond to a plurality of two pixel resolution), the image designed empathy. Of course, you put the design out of the 640 pixel resolution is the same as the picture on the effect under the retina and non-retina device equipment in width of 320 pixels look the same fact, a closer look at whether there are differences that is more clear difference (can Naan Zhuo ios and contrast).
Figure out the viewport after this little giant that we have to know how to get the width of the device via js code, the width of the viewport and html document
Summarized below (not including other special circumstances and IE):
/*
*1.获取包含滚动条尺寸的浏览器完整内部尺寸
*2.获取用户实际的看到的视口大小（即发送缩放后的可视区域大小|visual viewport 大小）默认等于viewport大小
*/
window.innerHeight
window.innerWidth
/*
*1.设置的viewport大小
*/
document.documentElement.clientHeight
document.documentElement.clientWidth
/*
*1.HTML 文档大小
*/
document.documentElement.offsetHeight
document.documentElement.offsetWidth
/*
*1.设备大小
*/
screen.Height
screen.width
There are plenty of online discussion of the viewport, no lack of great God to explain, is different.
Multi-day access to more than just personal practice and summary, for reference only!
Thank you!