3 ms·

> Lay out content based on the viewport width, in CSS pixels. This is wrong because the viewport width is not the same as the monitor width or the DPI: especia

> Lay out content based on the viewport width, in CSS pixels. This is wrong because the viewport width is not the same as the monitor width or the DPI: especially on big monitors running the browser fullscreen is very hard to use (my browser rarely exceeds more than ~50% width on a 2560x1440 monitor and even when i use a 1366x768 monitor - which btw is at 22", not some tiny laptop one - i very rarely use it maximized).

jefftk 6y ago
The viewport width is the browser width, not the screen width. What are you saying is wrong with using the viewport width?
- badsectoracula 6y ago
  Uh, i wrote "viewport width is not the same as the monitor width", this is the same as what you wrote. As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.
  - jefftk 6y ago
    "Mobile vs desktop" is not a distinction websites should be making. Sites should make the best use they can of the available horizontal space. It's still not clear to me where you think this approach gives bad results?
    - karpierz 6y ago
      Ergonomics of using touch screen vs. mouse. Usage while walking/moving vs. sitting/standing at a desk.
      - jefftk 6y ago
        For touch screen vs mouse, use "pointer:coarse": https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... Most "mobile" usage is actually stationary, typically seated. If you really need to change layout based on motion you can use the accelerometer, but I can't see why you would?
    - badsectoracula 6y ago
      The problem is that the horizontal space only tells you how many pixels are available, not how big whatever you use those pixels for ends up on the screen. The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout. AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse). Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/
      - jefftk 6y ago
        CSS pixels are good for layout, not just sizes and positions, because a pixel (in a browser) now represents an apparent size. That is, if the user has a large device far from their face, or a small device close to their face, a pixel represents a similar portion of their vision. If they want things larger, they can adjust the scaling so a pixel represents a larger apparent size, or the reverse.
        badsectoracula 6y ago
        This is never true in practice though and what you describe is just about sizes and position, you can't change the layout with CSS pixels - you need resolution media queries for that.

jefftk 6y ago

The viewport width is the browser width, not the screen width. What are you saying is wrong with using the viewport width?

badsectoracula 6y ago
Uh, i wrote "viewport width is not the same as the monitor width", this is the same as what you wrote. As for why it is wrong, it is because you can't rely on it to make a Mobile vs Desktop distinction - i already provided an example why.
- jefftk 6y ago
  "Mobile vs desktop" is not a distinction websites should be making. Sites should make the best use they can of the available horizontal space. It's still not clear to me where you think this approach gives bad results?
  - karpierz 6y ago
    Ergonomics of using touch screen vs. mouse. Usage while walking/moving vs. sitting/standing at a desk.
    - jefftk 6y ago
      For touch screen vs mouse, use "pointer:coarse": https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer https://developer.mozilla.org/en-US/docs/Web/CSS/@media/poin... Most "mobile" usage is actually stationary, typically seated. If you really need to change layout based on motion you can use the accelerometer, but I can't see why you would?
  - badsectoracula 6y ago
    The problem is that the horizontal space only tells you how many pixels are available, not how big whatever you use those pixels for ends up on the screen. The precise vs coarse isn't helpful either for something like this because this isn't just about clicking vs tapping, it is about how the end result looks - and there are PCs with both very small monitors and very big monitors (and relatively large monitors with low DPI or small monitors with very high DPI). CSS pixels only help for setting sizes/positions, but not layout. AFAIK the best that can be done nowadays is resolution media queries but that isn't available everywhere (at least according to caniuse). Of course in practice i expect none of the above to be used and have my browser simply zoom out whenever i reach many sites just because i do not want to maximize my browser :-/
    - jefftk 6y ago
      CSS pixels are good for layout, not just sizes and positions, because a pixel (in a browser) now represents an apparent size. That is, if the user has a large device far from their face, or a small device close to their face, a pixel represents a similar portion of their vision. If they want things larger, they can adjust the scaling so a pixel represents a larger apparent size, or the reverse.
      - badsectoracula 6y ago
        This is never true in practice though and what you describe is just about sizes and position, you can't change the layout with CSS pixels - you need resolution media queries for that.