CODEWITHSUNDEEP
htmlcss
Sebiddychef
Sebiddychef

Reputation: 293

Pixels in CSS vs pixel density

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?

Upvotes: 4

Views: 3413

Answers (3)

Jay Gumballi
Jay Gumballi

Reputation: 3

A CSS pixel is not a physical pixel! 96 CSS px ~= 1 physical inch. refer to https://www.w3.org/TR/css3-values/

Upvotes: 0

What have you tried
What have you tried

Reputation: 11138

You can also use @media queries which allows you to use different css for different sized screens:

You can learn more CSS Tricks

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1151px) {
  body {
    background: #ccc;
  }
}

Another screen size

@media all and (max-width: 1000px) and (min-width: 700px) {
  #sidebar ul li a:before {
    content: "Email: ";
    font-style: italic;
    color: #666;
  }
}

Upvotes: -1

Graham Robertson
Graham Robertson

Reputation: 818

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!

Upvotes: 6

Related Questions