Pixels in CSS vs pixel density

css, html

Solution

Absolutely! Typically on a desktop, 1 css pixel = 1 pixel. Mobile devices (especially with newer high-res displays) have caused us some headaches. Here's my favourite workaround:

(function() {
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    var content = 'initial-scale=';
    content += 1 / window.devicePixelRatio;
    content += ',user-scalable=no';
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
})();

I typically add this as the first child of my body tag, but it should probably be in the head tag. This script modifies a device's scale such based on the pixel density of the display and forces 1 CSS pixel to equal 1 pixel.

Enjoy!

Problem

I am incredibly new to HTML and CSS and it just occurred to me that when deciding something is 5px say, since a pixel's physical size is dependent on the density then surely 5px on a screen of 100 ppi would look bigger than on a screen of 300 ppi. Is this correct and if so is there any way to mediate this?

Original source