Some concepts about pixel resolution and viewport

Source: Internet
Author: User

Device pixels:

The physical pixels on the screen.


Resolution:
1. Screen resolution: Number of pixels on the screen (horizontal * vertical)
2. Image resolution: The number of pixels in the image


CSS Pixels:
Logical pixels, used in CSS code
Logical pixel 320x568px--> device pixel 640x1136px
(1*1css pixels ==> 2*2 of physical pixels: device pixel ratio)


Device pixel ratio:
DPR = number of physical pixels/number of logical pixels
When dpr=2, 1 css pixels are composed of 4 physical pixel points.
Window.devicepixelratio

Pixel density:
Display Density Dip/ppi
Physical pixel/physical size
MATH.SQRT (750*750 + 1334*1334)/4.7 = 326ppi

# #设备独立像素:
Android is used to fit a model.
Dip: Reference pixel density 160.

Viewport:
Layout viewport: Much larger than the screen width, narrowing the site display.
Visual viewport: screen physical pixel size.
Ideal viewport: META-WIDHT

Some concepts about pixel resolution and viewport

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.