33 ms·

> Just accept that "px" is device-defined Nope! "px" is defined by the CSS spec. The physical pixels are device-defined as is the exact anti-aliasing algorithm

> Just accept that "px" is device-defined Nope! "px" is defined by the CSS spec. The physical pixels are device-defined as is the exact anti-aliasing algorithm but the spec dictates the dimensions of a logical ("px") pixel in the real world. Devices are not free to make "px" whatever they want it to be, because "px" is a logical pixel not a physical one. (Though it is a physical length). A classic example of why this matters is that Windows treats the screen as 96dpi but OS X treats it as 72dpi. If the CSS spec did not dictate the size of a "px" then all web pages on OS X would look 26% smaller than on Windows.

speleding 13y ago
The px would look larger on a screen with the lower dpi
- jahewson 13y ago
  That's not the case here because we're talking about CSS pixels and not physical pixels. A CSS pixel is 0.75in and an inch on Windows is 96 physical pixels but on Mac OS it is only 72 physical pixels.
  - speleding 13y ago
    No, you said: "If the CSS spec did not dictate the size of a "px" then all web pages on OS X would look 26% smaller than on Windows" My point is that they would look larger on OS X (lower dpi == larger pixels)
cynwoody 13y ago
>but OS X treats it as 72dpi I just added a 960px <hr> to this web page. On my monitor, attached to a MBP running OS 10.6, it measures about 9.5 inches (by holding up a ruler to the screen). That would indicate OS X treats my screen as about 100 dpi. The monitor is 30" diagonal, 2560x1600. So, calculating the dpi: irb(main):010:0* ratio = 1600/2560.0 => 0.625 irb(main):011:0> width = 30.0/Math.sqrt(1 + ratio*ratio) => 25.4399491201526 irb(main):012:0> dpi = 2560.0/width => 100.62913207527 One of these days, I'm going to get around to buying a new Retina MBP. Then, I'll try that exercise again.
- jahewson 13y ago
  Yep, that's because it's 960px in CSS pixels, which are at 96dpi. Your monitor also has it's own physical dpi so you can't just measure the length of a line on the screen to infer the OS's dpi.
diminoten 13y ago
The article says, > The way the CSS authors handled this problem (again, sensibly, IMO), was to allow the user agent (ie. the browser) to choose a useful precise size for the “px” unit and then size all the other units relative to that “px” unit. So I'm a little confused about what you mean when you say, "Nope! "px" is defined by the CSS spec."
- svachalek 13y ago
  According to the article, it's defined as an integer number of pixels approximating 0.265mm (SI). So the size will vary but this is a long way from "whatever the device+OS combo wants it to be."
- jahewson 13y ago
  These are both correct. The CSS 2.1 spec actually defines a CSS pixel ("px") as "the whole number of device pixels that best approximates the reference pixel". It's to allow a little leeway for devices with low-resolution screens. On a high-resolution screen a CSS pixel should be = the reference pixel.
  - Macha 13y ago
    To the best of my knowledge, on iOS, 1 CSS px has been 2 device pixels for a while. Might even be 4 device pixels on Retina devices.
    - jahewson 13y ago
      Right, so a CSS pixel is equal to the reference pixel in size.
lmm 13y ago
What would be wrong with that? The whole point of HTML/CSS is that you don't get to design pixel-perfect layouts (use something like PDF for that). The device is free to reflow pages and layouts as it sees fit. If OSX users prefer to see web pages as smaller than windows users, why not just let them?

speleding 13y ago

The px would look larger on a screen with the lower dpi

jahewson 13y ago
That's not the case here because we're talking about CSS pixels and not physical pixels. A CSS pixel is 0.75in and an inch on Windows is 96 physical pixels but on Mac OS it is only 72 physical pixels.
- speleding 13y ago
  No, you said: "If the CSS spec did not dictate the size of a "px" then all web pages on OS X would look 26% smaller than on Windows" My point is that they would look larger on OS X (lower dpi == larger pixels)

cynwoody 13y ago

>but OS X treats it as 72dpi I just added a 960px <hr> to this web page. On my monitor, attached to a MBP running OS 10.6, it measures about 9.5 inches (by holding up a ruler to the screen). That would indicate OS X treats my screen as about 100 dpi. The monitor is 30" diagonal, 2560x1600. So, calculating the dpi: irb(main):010:0* ratio = 1600/2560.0 => 0.625 irb(main):011:0> width = 30.0/Math.sqrt(1 + ratio*ratio) => 25.4399491201526 irb(main):012:0> dpi = 2560.0/width => 100.62913207527 One of these days, I'm going to get around to buying a new Retina MBP. Then, I'll try that exercise again.

jahewson 13y ago
Yep, that's because it's 960px in CSS pixels, which are at 96dpi. Your monitor also has it's own physical dpi so you can't just measure the length of a line on the screen to infer the OS's dpi.

diminoten 13y ago

The article says, > The way the CSS authors handled this problem (again, sensibly, IMO), was to allow the user agent (ie. the browser) to choose a useful precise size for the “px” unit and then size all the other units relative to that “px” unit. So I'm a little confused about what you mean when you say, "Nope! "px" is defined by the CSS spec."

svachalek 13y ago
According to the article, it's defined as an integer number of pixels approximating 0.265mm (SI). So the size will vary but this is a long way from "whatever the device+OS combo wants it to be."
jahewson 13y ago
These are both correct. The CSS 2.1 spec actually defines a CSS pixel ("px") as "the whole number of device pixels that best approximates the reference pixel". It's to allow a little leeway for devices with low-resolution screens. On a high-resolution screen a CSS pixel should be = the reference pixel.
- Macha 13y ago
  To the best of my knowledge, on iOS, 1 CSS px has been 2 device pixels for a while. Might even be 4 device pixels on Retina devices.
  - jahewson 13y ago
    Right, so a CSS pixel is equal to the reference pixel in size.

lmm 13y ago

What would be wrong with that? The whole point of HTML/CSS is that you don't get to design pixel-perfect layouts (use something like PDF for that). The device is free to reflow pages and layouts as it sees fit. If OSX users prefer to see web pages as smaller than windows users, why not just let them?