Recently, I have started to contact the relevant knowledge of mobile terminal development. Here are some conclusions:
1. Basic concepts
Screen size: diagonal length (cm)
Screen resolution: the number of physical pixels in the horizontal and vertical directions (physical pixels)
Screen density: per The number of physical pixels in inches
Viewport size The number
of horizontal and vertical css pixels (css pixels)
2.4 pixels 3 viewports 2 operations 1 scale
4 pixels:
physical pixel
resolution is the screen image The smallest unit
of the actual screen size occupied by a physical pixel is the same on different devices?
When the
device is shipped from the factory, the number of physical pixels contained in the device and the actual screen size occupied by one physical pixel will not change. The
css pixel
is the smallest unit used by web developers.
A css pixel will eventually be converted to physical Pixels appear on the screen.
How many physical pixels does a css pixel occupy? Who is it?
Features of the screen The user ’s zooming behavior
does not take into account the user ’s zooming.
No viewport:
how many physical pixels (horizontal resolution)
are occupied horizontally by this screen (how many css pixels (horizontal dimensions of the visual viewport)
are occupied horizontally viewport:
pixel ratio
The number of physical pixels occupied in one direction / the number of css pixels occupied in one direction
Consider the user zoom
. Based on the characteristics of the screen:
zoom in: css pixels occupy more physical pixels
shrink: css pixels occupy more less physical pixel
device independent pixel
is a pixel css docking interface device, once the independent pixel and the pixel css hanging hook (width = device-width)
at this time than the pixel to make a real difference
bitmap pixel
image of a minimum unit
bitmap pixels When compared with physical pixels, the picture can display
3 viewports perfectly and clearly.
Layout viewport
determines the layout of the page. The
visual viewport
determines
how many physical pixels the user can see in a css pixel and the visual viewport has a huge Relationship
The actual size of a visual viewport is determined (screen size)
The number of physical pixels contained in a visual viewport is determined (resolution)
The number of css pixels contained in a visual viewport is uncertain (user Scaling behavior)
Ideal viewport
device The value represented by the independent pixel
2 operations
User
only affects the layout viewport
system (initial-scale)
Affect the layout viewport and visual viewport.
Using the initial-scale in the <meta> tag to change the pixel ratio will affect the corresponding proportion of CSS pixels and physical pixels. The number of CSS pixels included in the visual viewport will also
change , Ie the visual viewport will change, so it will affect the layout viewport and visual viewport.
Amplifying
amplifies a css pixel area, the size of the visual viewport becomes smaller, the number of physical pixels included in a pixel increases css
reduction
reduction css a pixel area, the size of the visual viewport becomes larger, a pixel includes physical css the number of pixels fewer
pixels than the
official definition:
physical pixel / pixels independent device
number pixels on css number of physical pixels occupied one direction / direction occupied by a
3.3 accident
1. much element
using The perfect viewport (with width = device-width and initial-scale = 1.0) solves the problem of too large elements exceeding the visual viewport and no scroll bar.
2.The conflict between width and initial-scale
who listens to whom (who sets Under certain rules, the layout viewport corresponds to a large css pixel, so whoever listens to it)
3. Ratio problem
No viewport: The
ratio is too small, the page display is too small, and the user experience is not good
. Viewport: The
ratio is not equal, each css pixel is The actual screen size occupied by different devices is the same.
Each css pixel occupies a different number of physical pixels on different devices (pixel ratio).
The actual screen size occupied by a physical pixel is different on different devices
