Some knowledge of the mobile end width

When doing the mobile side, often contact with the word devicepixelratio, the definition of the word is:

Window.devicepixelratio is the ratio of physical pixels and device independent pixels (device-independent pixels (dips)) on the device.

The formula is:

Window.devicepixelratio = physical pixels/dips;

Small conclusion:

When the page <meta name="viewport" content="width=device-width"> is set, document.documentElement.clientWidth in most browsers, the width of the layout viewport is the same as the width of the dips.

① on iOS devices, Window.screen.width returns a dips wide, so the Retina Display's ipad and the non-Retina display ipad return 768 when displayed vertically.

　　　　　　screen.widthMultiplied by devicePixelRatio the resulting physical pixel value.

② on an Android device, Window.screen.width returns the physical pixel width.

　　　　　　screen.widthDivided by devicePixelRatio the device independent pixel (dips) value.

③ devicePixelRatio is trustworthy in most browsers.

Some knowledge of the mobile end width