css pixels: 200px This is a box pixel css, css occupies 200 pixels, is the smallest unit in web development
Physical pixel: in the horizontal and vertical number of pixels, the unit px minimum unit, 1px = 1 pixel points, rendering the device (also called device pixels)
Screen size: screen diagonal length, in inches, 1 inch = 2.54 cm
Screen Resolution: vertical pixels * horizontal pixels, the higher the higher the screen clear.
High-definition screen: a super-advanced physical pixel density, more number of points displayed on the screen of the same size
Pixel density: not the number of pixels displayed on the screen can inch.
Device independent pixels: 375 * 667 iphone 6/7/8, it is an abstract layer, provides an interface, docking pixel css
DPR (pixel ratio): physical pixel / pixels independent device. The number of physical pixels on the fill / screen in one direction a number of independent pixels required to fill a desired screen on the device (that is, physical pixel resolution) in one direction.
A device independent physical pixels 4 pixels =
Bitmap pixel: the smallest unit of an image. 640 * 320 is the designer to give you the image size, a bitmap pixel occupy a physical pixels, the image was not distorted
When coupled meta tags on the page, width = device-width, so that the pixel device css link up individual pixels, individual pixels equivalent to a pixel device css
1css pixel = 4 times the physical pixel (iPhone6)
Moving end viewport
Layout viewports: General 980, some 1024, greater than 960, the general page is 960, css pixels, decide the layout of the page, in the end or want to change the line, plus
<meta name="viewport" content="width=device-width"> 布局视口375
Visual viewport: Users can decide to see, than the physical pixel pixel with css, usually 980, if the user can see the whole page, css visual viewport is 980 pixels, zoom in to see something a fewer,
css pixel contains smaller. <Meta name = "viewport" content = "width = device-width"> visual viewport 375
Viewport ideal: just add <meta name = "viewport" content = "width = device-width"> later, will have an ideal viewport, as big as the visual viewport with visual viewport
var layout = document.documentElement.clientWidth; // layout no problem layout viewport width compatible
clientWidth: parcel no scroll bars, borders, within the frame, the outer border
var visual = window.innerWidth; nearly all support
innerWidth: wrapping the vertical scroll bar
var dream = screen.width; // width (pc) in general represents over viewport, generally represents the resolution of the device (movement), there is great compatibility issues
Zoom: zoom area css pixels, each pixel css area becomes large, the number of pixels in the region css becomes small, the size of the visual viewport becomes smaller.
Reduction: reducing the area css pixels, each pixel area css smaller, the number of pixels in the region css increases, the size of the visual viewport increases.
Pc end user zooms in the visual effect of the size of the viewport, the viewport is also affect the layout size, zoom, layout viewport becomes smaller; reduction, the layout viewport becomes larger
In the mobile-side scaling the visual effect of the size of the viewport, the size does not affect the layout viewport
Zoom system, reference is made over the viewport scale, changing the visual layout viewport and viewport
. . . . To be continued