Introduction: This article mainly for popular science mobile terminal basic adaptation concept, welcome to spray

  1. Inches: 
    The physical size of a screen is 15.6 and 22 inches for a computer monitor and 4.8 and 5.7 inches for a mobile phone monitor. The dimensions above are the diagonal length of the screen: inchesin") means "thumb" in Dutch, and an inch is the width of an average person's thumb at the bottom of a fingernail. Inches and centimeters: 1 inch =2.54 centimetersCopy the code
  2. Screen resolution (physical pixels) : 
    Refers to the number of pixels that make up a screen, such as iphonexs Max 2688(vertical) X 1242 (horizontal)Copy the code
  3. Screen Resolution (PPI) 
    The iPhone XSMax has a sharper screen with a PPI of 458 and the iPhone SE has a PPI of 326, meaning the pixel per inch is sharper. Important reference values when purchasing equipmentCopy the code
  4. Device independent pixel (DIP or DP) 
    For example, the previous device A has A resolution of 375 X 480, while the new device B has A resolution of 750 X 960. The physical size of device A and device B is the same (4.8 inches). Normally, CSS sets A box with A width of 100px. On the machine B shows the physical size (visual) equipment compared to A smaller, in order to solve this problem, apple retina screen on the device B in 400 physical pixel rendering A 100 CSS pixels, solve the problem of different resolution on the device display, at this time requires A standard unit to tell different resolution devices, What are the size of the elements they display on the interface, that is, device-independent pixelsCopy the code
  5. Device pixel ratio 
    CSS: Query @media only screen and (min-device-pixel-ratio:2)Copy the code
  6. Layout viewport 
    When specifying the size of an element as a percentage, its value is calculated as a number of elements from the element's containment block. The top-level element is calculated based on the layout viewport. So layout viewports are the benchmark for web layout. Mobile layout viewports are given a default value, mostly 980px, so that a PC web page can be rendered on a mobile browser, but are so small that users can manually zoom in on the page. api: window.documentElement.clientWidth/HeightCopy the code
  7. Visual viewport 
    The real area that the user sees through the screen, by default, is equal to the size of the current browser window. Zooming the browser does not change the size of the layout viewport, so the page layout remains the same, but zooming changes the size of the visual viewport. Layout viewports limit CSS layout while visual viewports determine exactly what the user can see. api: window.innerHeight/WidthCopy the code
  8. Ideal viewport 
    Ideal size of the web page display on the mobile end browser debugging mobile terminal when a given pixel size on a page is the ideal size of the viewport, its unit is device independent pixel API: window. The screen. The width/heightCopy the code
  9. API set: 
    Window. innerHeight: Gets the height of the browser viewport (including the vertical scroll bar). OuterHeight: gets the outerHeight of the browser window. Represents the height of the entire browser window, including the sidebar, window borders, and resize borders. Window. Screen. Height: get a screen for ideal viewport Height, this value is fixed, the resolution of the equipment/device pixels than the window. The screen. AvailHeight: the Height of the browser window. For the document. The documentElement. ClientHeight browser layout viewport height, including padding, but does not include the vertical scroll bars, borders, and from the outside. Document. The documentElement. OffsetHeight: include padding, scroll bars, borders, and from the outside. Document. The documentElement. ScrollHeight: in the case of does not use the scroll bar is suitable for all the required minimum width of viewport. The measure is the same as clientHeight: it contains the inside margin of the element, but does not include borders, margins, or vertical scrollbars.Copy the code