breakpoints interact badly with devicePixelRatio for DPI that are slightly above 96.

[RichardNeill]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Most regular desktop, non-retina monitors are about 90-120 dpi (not the nominal 96 dpi). Recently, Firefox/Chrome now take this into account, so that the screen-width is measured in CSS pixels, not true pixels. As a result, the breakpoints now trigger one level too low.

Here's what I measured:

Physical screen: 4k, 3840x2160, at 43" diagonal. The physical DPI is 103.
[This setup is ideal for web development, as a quadrant is the typical 1920x1080].

Case 1.
DPI set to 96 (default).
Fonts are a bit small.
An element with "style='width:3in'" is in fact 2.8 inches wide (with a ruler).
window.screen.width is 3840
window.devicePixelRatio is 1.

Case 2.
DPI set to 103 (the reality).
Fonts are exactly the right size
An element with "style='width:3in'" is in fact 2.99 inches wide (with a ruler).
window.screen.width = 3584
window.devicePixelRatio is 1.0714

Consequence: my 1920-wide (half-screen), now identifies itself as -xl rather than -xxl, and so we get the multicolumn-layout totally messed up (in my case, 2 cols, not 3 cols).

Suggestion 1:
Please document this behaviour on the bootstrap site - it took me ages to debug.
It seems to be a recent change in the web-browser behaviour.

Suggestion 2:
Reduce the breakpoint sizes to about 85% of their present values (when above 1200). This means that we will always catch the 110-dpi monitors in the right category.

Finally, it may help to give my experimental values, which work for most standard devices; and which account for DPI up to 15% greater than 96, (as well as allowing for modal dialogs at 98% of screen size).

$grid-breakpoints: (	
  xs: 0,
  sm: 576px,     //phone.  (including high resolution, 2x devices)
  md: 768px,
  lg: 992px,       //tablet.
  xl: 1200px,     //small desktop monitor.
  xxl:1610px,    //normal "good" desktop monitor, nominally above 1920px. 
  gg: 2140px,   //gigantic desktop monitor, nominally 2560px.
  4k: 3200px    //4k, wallmount or developer machine, nominally 3840px.
)

(This bug is most likely to affect web-developers who will carefully calibrate for their own systems, then design to make it perfect for themselves, and consequentially worse for normal users).

Reduced test cases

See: https://whatismyviewport.com/

What operating system(s) are you seeing the problem on?

Linux

What browser(s) are you seeing the problem on?

Firefox

What version of Bootstrap are you using?

5.3