CODEWITHSUNDEEP
htmlcssviewport
overexchange
overexchange

Reputation: 1

Viewport pixel Vs Device pixel Vs CSS pixel

CSS pixel:

div.sidebar {
    width: 300px;
}

css-pixel-width = device-pixel-width x 1 / Device-pixel-ratio

For example: Say, a device with 1920(w) X 960(h) device pixels and dpr = 2.

css-width = 1920 * (1 css px / 2 device px) = 960 px

Device pixel:

@media all and (max-device-width: 320px) {
      ....    
}

Zooming factor:

When the zooming factor is exactly 100%, one CSS pixel equals one device pixel (though the upcoming intermediate layer will take the place of device pixels here.) The image below depicts that. Not much to see here, since one CSS pixel exactly overlaps one device pixel.

enter image description here

I should probably warn you that “zoom 100%” has little meaning in web development. Zooming level is unimportant to us; what we need to know is how many CSS pixels currently fit on the screen.The following two images illustrate what happens when the user zooms. The first shows device pixels (the dark blue background) and CSS pixels (the semi-transparent foreground) when the user has zoomed out. The CSS pixels have become smaller; one device pixel overlaps several CSS pixels. The second image shows device and CSS pixels when the user has zoomed in. One CSS pixel now overlaps several device pixels.

enter image description here

Question:

1) How to manage zoom levels? Does auto-scale attribute of meta tag decides the zoom level?

Viewport: It’s the area (in CSS pixels)

Wrt viewport pixel,

initial-scale sets the relation between CSS pixel and viewport pixel, as mentioned here. For example: initial-scale = 1 mean 1 CSS pixel is equal to 1 viewport pixel.

Question:

2) What is viewport pixel?

Upvotes: 3

Views: 2649

Answers (1)

BoltClock
BoltClock

Reputation: 723428

Sounds like the answerer made up that term on the spot when answering the linked question. It doesn't help that their answer (before I edited it) consisted entirely of blockquotes, giving the false impression that they cited an external source that apparently defined those terms.

CSS does not define such a term, nor does any other specification. The viewport meta tags simply change the zoom behavior of a mobile browser and don't have any meaningful effect on rendering.

Upvotes: 2

Related Questions