Information about MVC

2. What is viewport

   In short, viewport is the browser, used to display the part of the area of the page, that is, the actual width of the browser is not the same width as our phone, whether your phone width is 320px, or 640px, the width inside the mobile browser, Will always be the viewport of the browser itself. Today's browsers will give themselves a default value of viewport, possibly 980px, or other values. As far as mobile phone is concerned, at present, the new version of the mobile browser, most of the 980px as the default viewport value. I am here to test the new version of the browser under the different platform, tested, the default viewport under the iphone 980px, Android browser, the current mainstream of the latest browser (such as chrome, there are many domestic like QQ, The viewport of UC) is also 980px.

4. What is viewport used for?

   The default value of viewport, which is generally larger than the phone screen. This can be done when we browse the Desktop page, we can make the desktop End page normal display (our normal page design, the General page of the main area is 960px to do, so 980px this value, can be done to the normal desktop page display). However, in fact, the screen width of our phone is not 960px, so the browser will appear a horizontal scroll bar. At the same time, even if it is based on the 980 viewport, our experience on the mobile side of our desktop page is not really good, so, in general, we will specifically for the browser to design a mobile page.

6. Control of the viewport

   The majority of browsers today (ie, the mainstream Android browser and iOS) support a control of viewport. In general, we will write this.

   Viewport Default has 6 properties

   • Width: Sets viewport (that is, the width of the browser as mentioned previously), which can be an integer or a string "Width-device"
   • Initial-scale: The initial zoom value of the page, as a number, can be a decimal
   • Minimum-scale: Allows the user's minimum zoom value to be a number, which can be a decimal
   • Maximum-scale: Allows the user's maximum zoom value, as a number, can be a decimal
   • Height: Sets the altitude of the viewport (which we do not normally use)
   • User-scalable: Whether the user is allowed to scale, ' no ' is not allowed, ' yes ' is allowed

   We're putting this tag inside the head, like this.

   <meta name="viewport" content="initial-scale=1">

   So that we can control the viewport.

Two. About our equipment

1. Three concepts to understand:

   • PPI: Can be understood as the display density of the screen
   • DPR: The correspondence between the physical pixel of the device and the logical pixel, i.e. the physical pixel/logical pixel
   • Resolution: That's the resolution we always say.

2. Physical pixels and logical pixels

   After looking at the 1th of our above content, maybe some people will have some questions, my Android phone, or iphone6plus (should be limited to this model right now), buy back 1920x1080 or other higher, It's bigger than the default 980px that I called the viewport.

   The problem, which I mentioned earlier, is the relationship between the physical pixels and the logical pixels (that is, DPR). In 1920x1080, for example, 1080 is a physical pixel, and we get it in viewport, such as "Width-device", which is a logical pixel. So the default value of the previous viewport, the size of the pair, is actually the size of the logical pixel, not the size of the physical pixel.

   Take Iphone6 as an example, without doing any scaling, the iphone6 gets the ' Width-device ' to 375px, which is the logical pixel of the screen. The 750px that we know when buying is the physical pixel of the screen.

3. Problems with CSS

   With some of the 2nd above, or iphone6 as an example, we can know that we have actually written 1px, which is 2px of physical pixels on iphone6. So, in the end, give a conclusion. That's what we wrote. 1px, on the mobile side, is the 1px of the logical pixel, not the physical pixel of 1px.

Information about MVC