viewport

Viewport: Viewport can be set in meta. Common mobile viewports are divided into layoutViewPort, VisualViewPort and IdealViewPort

  • layoutviewport: Window viewport, generally set as 980px, through zooming to solve the mobile terminal screen size is small and affect the web display problem;
  • visualviewport: visual viewport, refers to the viewport size of the mobile terminal;
  • idealviewport: Ideal viewport. By modifying layoutViewPort to be equal to the width of the device, different resolutions of the mobile terminal display page effect is the same

Fixed positioning is disabled on Android

Set the viewPort size to idealViewPort, so that the viewport width is larger than the screen of the scrollbar, resulting in fixed positioning based on the screen of the fixed effect cannot be achieved

pixel

Equipment pixel

The physical pixel is generally equivalent to the resolution of the mobile phone, and the device pixel cannot be changed

Device independent pixel

Equivalent to a CSS pixel, it is a unit relative to a device pixel, depending on the scale of the page and the size of the DPR

dpr

The ratio of device pixels to device-independent pixels, the DPR of most recent Apple products is 1, 2

ppi

Represents the density of skinless pixels per inch, and the higher the resolution, the higher the PPI

Mobile layout

rem

Advantages: Achieve overall scaling, good compatibility Disadvantages: Poor effect of special DPR devices, problems with iframe reference

vw + vh

Advantages: Good compatibility Disadvantages: Px conversion error, resulting in a certain pixel difference

Media queries

Use @media to query the type of client. When true, the associated style sheet or style is applied. When false, the associated stylesheet style will not be applied, but will still be downloaded. Disadvantage: Different styles are required for different devices, which can be troublesome

1px

  • meta viewport
  • border-image
  • The transform: scale ()