3 ms·

> When you are reading a text on your phone, you hold the screen at a certain distance from your eyeballs, but when you look at a computer screen—you tend to be

> When you are reading a text on your phone, you hold the screen at a certain distance from your eyeballs, but when you look at a computer screen—you tend to be further from it to read comfortably. The larger the distance between a retina and the Retina (pun intended), the larger the size of a “CSS pixel” will be. That is terribly wrong. Actually it just opposite: as further you move your eyes from screen as smaller that "CSS pixel". Yet the whole idea of that "CSS pixel" is terribly flawed: > The trickiest one is a so-called CSS pixel, which is described as a unit of length, which roughly corresponds to the width or height of a single dot that can be comfortably seen by the human eye without strain. "comfortably seen" is an "average temperature of patients in a hospital" - makes no reasonable value at all for particular me. CSS pixel is exactly this: a 1/96 inch square measured on surface of the screen.

marcosdumay 7y ago
> as further you move your eyes from screen as smaller that "CSS pixel". You are misreading it. The pixel gets physically larger so that you will see it at the same size. A CSS pixel is a 1/96 inch square on the surface of a typical desktop screen. (It wasn't adjusted to the recent trend of screen growth, so that number is getting more wrong with time.) Different media are expected to change that size so that your page renders the same way.
- xyzzy_plugh 7y ago
  Is a desktop screen different than a phone screen? In the physical world, 1/96 inch is 1/96 inch. The notion of HiDPI abstracts for the fact that their pixel pitch is much finer than a typical display, usually by 2-4x. Otherwise, most displays fudge for the fact that they're not quite 96ppi, since 100 or 94 isn't vastly different. Anyways, this is a good thing. It shouldn't really adjust with screen growth, but it's important to note that it's an abstract dimension (so thinking in terms of PPI/DPI with CSS pixels is unwise). It allows you to be agnostic to devices, and respect the user's preference (if possible) for how close to the physical display they are.
  - milankragujevic 7y ago
    100 ppi for a Full HD 22" screen. 386 ppi for a Full HD 5.7" screen (i.e. my phone).
  - marcosdumay 7y ago
    > Is a desktop screen different than a phone screen? Hum... Yes. That's the entire point of my comment. One is 90cm away, the other is 150cm away. An arcsecond of viewport on one is almost half of the linear size of the same viewport size on the other.
    - c-smile 7y ago
      There is an abbreviation for that - YMMV, right? My monitor is closer to that usually. And that's the point. It makes absolutely no sense to measure viewing angles. The only thing that we can agree is that area of finger/screen touch measured on screen surface is roughly equal for humans - 1cm x 1cm or something like that. So size of your buttons shall be measured in units of screen surface, but not in some mysterious things that depend on distance orthogonal to screen surface. So 1. CSS pixels must be treated as logical length unit equal 1/96 inch, and, 2. Browsers must ensure that 1in or 10cm are exactly that when measured by physical ruler on screen surface. I, as a developer, must know that my 1cm button is exactly that on screen and so human clickable.
      - marcosdumay 7y ago
        Your mileage will vary. A lot. But CSS sizes are defined by viewing angles, not by linear size. There was plenty of debate at the time it was standardized, and really, none of the options is good so they got one of the bad ones.
        c-smile 7y ago
        Yep, initial idea of HTML as just one dimensional tape of scrollable text - something that has given width but no height - literally just a Text for reading ... Who would have thought that we will start clicking <button>s by literally fingers. But how much of dev time wasted already in discovering that `px` stands for points in MacOS terms (1/72 on inch initially and now 1/96 of inch) and nothing near real pixels ...

marcosdumay 7y ago

> as further you move your eyes from screen as smaller that "CSS pixel". You are misreading it. The pixel gets physically larger so that you will see it at the same size. A CSS pixel is a 1/96 inch square on the surface of a typical desktop screen. (It wasn't adjusted to the recent trend of screen growth, so that number is getting more wrong with time.) Different media are expected to change that size so that your page renders the same way.

xyzzy_plugh 7y ago
Is a desktop screen different than a phone screen? In the physical world, 1/96 inch is 1/96 inch. The notion of HiDPI abstracts for the fact that their pixel pitch is much finer than a typical display, usually by 2-4x. Otherwise, most displays fudge for the fact that they're not quite 96ppi, since 100 or 94 isn't vastly different. Anyways, this is a good thing. It shouldn't really adjust with screen growth, but it's important to note that it's an abstract dimension (so thinking in terms of PPI/DPI with CSS pixels is unwise). It allows you to be agnostic to devices, and respect the user's preference (if possible) for how close to the physical display they are.
- milankragujevic 7y ago
  100 ppi for a Full HD 22" screen. 386 ppi for a Full HD 5.7" screen (i.e. my phone).
- marcosdumay 7y ago
  > Is a desktop screen different than a phone screen? Hum... Yes. That's the entire point of my comment. One is 90cm away, the other is 150cm away. An arcsecond of viewport on one is almost half of the linear size of the same viewport size on the other.
  - c-smile 7y ago
    There is an abbreviation for that - YMMV, right? My monitor is closer to that usually. And that's the point. It makes absolutely no sense to measure viewing angles. The only thing that we can agree is that area of finger/screen touch measured on screen surface is roughly equal for humans - 1cm x 1cm or something like that. So size of your buttons shall be measured in units of screen surface, but not in some mysterious things that depend on distance orthogonal to screen surface. So 1. CSS pixels must be treated as logical length unit equal 1/96 inch, and, 2. Browsers must ensure that 1in or 10cm are exactly that when measured by physical ruler on screen surface. I, as a developer, must know that my 1cm button is exactly that on screen and so human clickable.
    - marcosdumay 7y ago
      Your mileage will vary. A lot. But CSS sizes are defined by viewing angles, not by linear size. There was plenty of debate at the time it was standardized, and really, none of the options is good so they got one of the bad ones.
      - c-smile 7y ago
        Yep, initial idea of HTML as just one dimensional tape of scrollable text - something that has given width but no height - literally just a Text for reading ... Who would have thought that we will start clicking <button>s by literally fingers. But how much of dev time wasted already in discovering that `px` stands for points in MacOS terms (1/72 on inch initially and now 1/96 of inch) and nothing near real pixels ...