Mobile Web Knowledge

1. Pixel knowledge

Px:css pixels, logical pixels, abstract units used by the browser

Dp,pt:device independent pixels, device independent pixels

Dpr:devicepixelratio Device pixel scaling ratio

　　

Calculation Company: 1px= (DPR) *DPR*DP

2, Viewport

The phone browser defaults to two things for us.

One: The page is rendered in a 980px (ISO) viewport.

Two: Zoom

There is visual Viewport and layout Viewport.

The best meta settings are as follows:

　　<meta name= "viewport" content= "Width=device-width,initial-scale=1,user-scalable=no" >

Window.innerwidth/document.body.clientwidth= Zoom ratio

"Layout Viewport" = "device width" = "Measure Viewport"

　　

Mobile Web Knowledge