Do pixel densities affect positioning of elements across various devices?

Question

I'm building a custom slideshow and I want my slide controls to always be at a certain position on the bottom of the window. To accomplish this I'm using jQuery and setting the top property of the div containing the controls to the window height - 50px.

My question is, if the site is viewed on a device with a high pixel density does this approach still work? I have nothing to test on and appreciate any feedback. In my mind I think that if a device has a high pixel density 50px will only move it slightly, but I'm hoping I am wrong.

Answer 1

CSS px units are not pixels.

This includes their use in jQuery. px units do not correspond directly to physical pixels on the display.

w3.org has a page that explains px and other CSS units:

The px unit is the magic unit of CSS. It is not related to the current font and also not related to the absolute units. The px unit is defined to be small but visible, and such that a horizontal 1px wide line can be displayed with sharp edges (no anti-aliasing). What is sharp, small and visible depends on the device and the way it is used: do you hold it close to your eyes, like a mobile phone, at arms length, like a computer monitor, or somewhere in between, like a book? The px is thus not defined as a constant length, but as something that depends on the type of device and its typical use.

To get an idea of the appearance of a px, imagine a CRT computer monitor from the 1990s: the smallest dot it can display measures about 1/100th of an inch (0.25mm) or a little more. The px unit got its name from those screen pixels.

Nowadays there are devices that could in principle display smaller sharp dots (although you might need a magnifier to see them). But documents from the last century that used px in CSS still look the same, no matter what the device. Printers, especially, can display sharp lines with much smaller details than 1px, but even on printers, a 1px line looks very much the same as it would look on a computer monitor. Devices change, but the px always has the same visual appearance.

Another way to think about this is that CSS px is an Angular Measurement:

“Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees.”

So your -50px should appear visually to be approximately the same size on any device. The actual number of pixels that corresponds to will depend on the device's pixel density, how far the device is intended to be from the user's eyes, and also user customization.