07-Mobile development tutorial-Mobile viewport

Lao Ma Initial study of the concept of the viewport, read a lot of articles, it seems that a lot of information, fresh someone can put this thing to speak very thorough. The old horse then from the beginner can understand the angle to explain the viewport and adaptation of the program.

1. About Screen 1.1 screen size

Device screen size refers to the diagonal length of the screen. For example: IPHONE6/7 is 4.7 inches, iphone6/7p is 5.5 inches.

1 inch =2.54 cm3.5in =3.5*2.54cm =8.89cm4.0 in= 4.0*2.54cm = 10.16cm4.8 in= 4.8*2.54cm = 12.192cm5.0 in=  5.0*2.54cm = 12.7cm5.5 in= 5.5*2.54cm = 13.97cm6.0 in= 6.0*  2.54cm = 15.24cm               

Cell Phone Size

Here you can see the screen size of most popular phones: address

1.2 Screen resolution

Screen resolution refers to the number of pixel points on the screen.

The common resolutions on the PC side are:[ 1366*768, 1440*900, 1024*768, 1400*900,...]
Common resolutions on the mobile side:[2160*1080, 1920*1080, 1334*750, 1136*640...]

In the resolution of the time we often put the big value in front, so the PC-side screen width than the height of the value of a bit larger, the first value is generally refers to the width of the second value is a height.

On the contrary, the mobile phone is generally less than the height of the width, so the first value is the width.

The current popular device resolution address

Add several concepts
Full HD (All HD):1080 resolution, iphone7p is this.
4K screen: Also known as QHD or UHD (Ultra HD), the minimum resolution is 38402160, TV with many
Pixel of device camera:
640*480 = 307200 = 300,000 pixels
1600*1200 = 1920000 = 2 million pixels
3264*2488 = 8120832 = 8 million pixels
4536*3024 = 13716864 = 14 million pixels

PPI/DPI of 1.3 devices

PPI (Pixels Per Inch) | DPI (Dots per inch), two values are the number of pixels per inch of the screen, or pixel density (density).

General calculation method or formula: dpi= diagonal Resolution/Screen size

The resolution of the screen diagonal, which is the number of pixels on the diagonal of the screen, can be calculated by the Pythagorean theorem based on known horizontal resolution.

Added: Triangular Pythagorean theorem

Calculate the following phone dpi:

Phone DPI calculation

The Pythagorean theorem calculates the diagonal resolution

Diagonal resolution divided by screen size: 2203/5≈440dpi

1.4 Device pixel with logical pixels (CSS pixels) 1.4.1 Device pixel:

Device pixels are physical concepts that refer to the physical pixels used in the device, that is, the number of glowing points in the screen (the screen consists of many luminous dots, each light point can display a different color, and these glowing dots make up the screen).

For example, the iphone 5 resolution 640 x 1136PX. There are 640 illuminated points in the landscape, with 1136 illuminated points lengthwise. So we say that the IPhone5 device level pixel is 640 pixels, which refers to 640 light points.

1.4.2 css pixels (CSS pixel):

CSS pixels are the concept of Web programming, the logical pixels used in CSS style code. 1 logical pixels may correspond to multiple physical pixels (glow points).

In the CSS specification, the length units can be divided into two categories, absolute (absolute) units, and relative (relative) units. The PX is a relative unit, relative to the device pixel.

For example 1:
Suppose that the physical resolution of the old horse computer is 1024* 768. If I deliberately set the operating system resolution to 512*384 (1 time times the horizontal and vertical), then the CSS-defined 1px-pixel box appears in the screen with a width that is more than the original high-resolution width, so the pixels in the CSS are relative, not absolute.

For example 2:
The IPhone 5 uses the retina Retina screen, the pixel of the horizontal logic CSS is 320px, but the actual physical pixel is 640 points, so the horizontal direction will have 2 points corresponding to the CSS 1 pixels, vertical is twice times the relationship, This is the logical pixel of 1 CSS: a logical css pixel of 1px width 1px high by the horizontal 2 physical pixel points and the vertical 2 pixels (2 by 2=4) 4 physical pixel points. If it is a CSS pixel: 2px*2px?

The left side is the normal screen, the right side is the retina screen

Because of this twice-fold relationship, we also call iphone5 twice times the screen, which is DPR.

1.4.3 device independent pixels (DIP)

Device independent pixels (dip,device-independent pixel,density-independent pixel), simply the device-independent pixels: devices-independent units used to measure pixels logically. In mobile Web development, it refers to the logical pixels of CSS.

1.5 Device pixel ratio (devicepixelratio)

Device pixel ratio (DPR) and PPI have a certain correlation, that is, the larger the PPI, DPR correspondingly larger, 1DPR corresponds to 160ppi, the table is as follows:

dpi dpi dpi

Ppi	120	160	240	320
Default zoom ratio (DPR)	0.75	1.0	1.5	2.0

Device pixel ratio DPR (devicepixelratio) is the ratio of device pixels (also called physical pixels) and CSS pixels (device independent pixels) when the default scaling is 100%.

DPR = device pixel/css pixel

Just calculate horizontal or vertical. For example: Iphone5 For example: horizontal physical pixel 640 page scale 100%, horizontal 320px, then DPR = 640/320 = 2

DPR also has a corresponding JavaScript attribute window.devicePixelRatio (ie11+,edge,chrome49+, safari9.1+)

DPR is not necessarily all integers, especially Android devices are very fragmented!

2. Viewport

Problem: PC-side design of the Web page is generally larger than 960px size, mobile browser in order to be able to the PC-side design of the site normal display, generally give a default full screen width of 980px (css pixels), although this can make mobile browser compatible with most PC-side pages, However, when the page is scaled, the text becomes very small, and the user needs to zoom out manually to see clearly and experience very poorly.

PC-side page displays the effect on your phone

Apple first introduced the viewport to the browser, followed by the big browsers.

A viewport (viewport) is a viewable area of a user's web page, or it can be called a viewport.

2.1 PC End Viewport

The size of the PC-side viewport corresponds to a 1:1 fixed percentage of the width of the browser's viewable area. This means that the browser changes the width and the viewport changes accordingly.

2.2 Moving the port viewport

The mobile viewport is no longer associated with the mobile browser screen width and can be larger or smaller than the viewable area of the browser, and the page can be scaled (enlarged, zoomed out).

Because the viewport of the mobile side can zoom in, zoom out, and change the width, the viewport size is inconsistent with the width of the screen and the width of the layout, and there are two concepts: the layout viewport and the visual viewport.

2.2.1 View viewport (visual viewport)

A view viewport is a visual area of the physical screen of a handheld device.

The visual viewport is the area of the site that the user is seeing, and for the JavaScript attribute is Window.innerwidth/height

2.2.2 Layout viewport (layouts viewport)

Layout viewport: In the mobile viewport and mobile browser screen width is no longer associated, you can set its width height (mainly wide), this viewport is the area of HTML page layout, and can be controlled by viewport meta tag.

Layout viewports are not affected by scaling, and scaling does not result in page reflow rendering, which is important for valuable performance on the mobile side.

Layout viewport the width of the viewport can be obtained by JS document.documentElement.clientWidth .

Default layout viewport widths for each browser:

2.2.3 META tag controls the width of the layout viewport

The META tag sets the syntax for the layout viewport:
<meta name="viewport" content="name1=value1,name2=value2">

Name	Value	Description
Width	Positive integer or Device-width	Set the width of the layout viewport in pixels
Height	Positive integer or Device-height	Defines the height of the layout viewport in pixels (not implemented)
Initial-scale	[0.0-10.0]	Define the initial page (layout viewport) scale value
Minimum-scale	[0.0-10.0]	Defines the minimum scale for the user to shrink, which must be less than or equal to the Maximum-scale setting
Maximum-scale	[0.0-10.0]	Define the maximum magnification for the user, which must be greater than or equal to the Minimum-scale setting
User-scalable	Yes/no	Defines whether the user is allowed to manually scale the page, the default value is Yes

Width is how wide the layout viewport is set. If setting iphone5s, the specific width value is: 320.

<meta name="viewport" content="width=320">

If you just set the width property of the viewport, the iphone's browser automatically zooms the page to exactly drop the page without a scroll bar, so at this point: visual viewport = = Layourt viewport.

In the example above: it is like dividing the screen into 320 parts. If you set an element to 100px*100px, it looks like 100/320 of the screen

If the width of the layout viewport is =device-width (device width, that is, physical pixel/DPR), the width of page 100% is exactly displayed in the visual viewport, does not need to zoom to view the page, and can be basically consistent in different sizes, The state of the layout viewport at this point is called the ideal viewport (ideal viewport).

Test code:

<! DOCTYPE html><Htmllang="EN" ><Head><Metacharset="UTF-8" ><MetaName="Viewport"Content="Width=device-width" ><Metahttp-equiv="X-ua-compatible"Content="Ie=edge" ><Title> Ideal Viewport</Title><Style> HtmlBodydiv {Padding0;Margin0;} .box {width: 100%; height: 100px; background-color:  #ccc; box-sizing:border-box;} </style></ head><body> <div class= "Box" > </div></ body></HTML>     

2.2.4 Ideal Viewport (ideal viewport)

The so-called ideal viewport is:
First, do not need user zoom and the horizontal scroll bar to be able to view all the contents of the website normally;
Second, the size of the displayed text is appropriate, such as a 14px size of text, not because in a high-density pixel screen is too small to see, the ideal situation is that the 14px of text regardless of the density of the screen, the resolution, the size of the display is similar. Of course, not just text, other elements like pictures and so is the truth.

The width of the ideal viewport can generally be calculated by the following formula:
width of ideal viewport = device pixel/DPR

That is, when the width of the layout viewport equals the width of the device's independent pixels, it is the ideal viewport.

A simple method of specifying:

<!--这一行代码告诉浏览器，布局视口的宽度应该与理想视口的宽度一致--> <meta name="viewport" content="width=device-width">或者 <meta name="viewport" content="initial-scale=1">

2.2.4 META tag controls the scaling of layout viewports

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

Why do we specify the viewport scale of the META tag 1 to also achieve the ideal viewport?

Who exactly is this ratio? This value is the percentage that determines the overall page zoom.

缩放比 = 理想视口的宽度 / 视觉视口的宽度

This means that when the width of the visual viewport is equal to the width of the ideal viewport, it is 1. Because the browser on the phone side automatically sets the width of the layout viewport to the width of the visual viewport, at this point: The device's layout viewport = = Visual Viewport = = Ideal viewport.

Take a look at the picture to understand:

Normal Screen	twice times screen

Visual viewport: When the page is manually enlarged, the user can see the content of the page is reduced, the size of the visual viewport becomes smaller. Conversely, do not repeat the same.

When the default zoom (Initial-scale) value is set, the browser calculates the visual viewport based on the ideal viewport and sets the layout viewport = = Visual Viewport.

However, if both width and Initial-scale are set, the browser will take two larger values, so you can set a minimum layout viewport width by width.

Other settings for 2.3 viewport

• Maximum-scale
  On the mobile side, you may consider the user browsing inconvenience, and then give the user the right to enlarge the page, but also want to be within a certain range of amplification, then you can use Maximum-scale to constrain.

• The Maximum-scale is used to specify the scale at which the user can enlarge.

As an example:
<meta name="viewport" content="initial-scale=1,maximum-scale=5" />
Assuming that the default zoom value of the page Initial-scale is 1, the user will eventually be able to enlarge the page to 5 times times the initial page size.

• Minimum-scale
  A description similar to Maximum-scale, but Minimum-scale is used to specify the page scaling.

Typically, in order to have a better experience, the value of this property is not defined to be smaller than 1 because the page becomes difficult to read.

• User-scalable
  If you don't want the page to be zoomed in or out, define user-scalable to constrain whether the user can scale the page by gesture.

The default value of this property is yes, which can be scaled (if the default value is used, the property may not be defined), and of course, if your app does not intend to have the user have the Zoom permission, you can set the value to No.

Here's how to use it:
<meta name="viewport" content="user-scalable=no" />

The next section previews:

移动端的适配方案

Contact Lao Ma

Corresponding video address: https://qtxh.ke.qq.com/
Old Horse qq:515154084
Old horse: Please sweep the code

Thank you for your support of the old horse.

07-Mobile development tutorial-Mobile viewport