Viewport pixel Vs Device pixel Vs CSS pixel

505
August 30, 2017, at 6:35 PM

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) {
      ....    
}

Zoom-in/out:

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.

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.

Question:

1) How to manage zoom levels?

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?

(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.)

Answer 1

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.

Rent Charter Buses Company
READ ALSO
Shrink text font size within a div using css [duplicate]

Shrink text font size within a div using css [duplicate]

This question already has an answer here:

425
HTML Text with font-weight : normal is rendering first and Font-weight:bold after it [on hold]

HTML Text with font-weight : normal is rendering first and Font-weight:bold after it [on hold]

In production website ( cant disclose ) , the fonts with normal weight seem to render first and then fonts with bold weight gets rendered laterBoth are using the same font family

264
On click of document or window a open div should close

On click of document or window a open div should close

I am trying to create my custom select drop down using jquery, all goes well except the click event onselect-list, it should close but currently it's not happening, below one is my code

298
Javascript for numbered table of contents

Javascript for numbered table of contents

I am putting together a Sharepoint wiki and on each article I have a wikipedia like table of contents from the headings using what I presume is a javascript that I found on the InterWebz

250