How to create responsible web for Samsung S24+ when the innerWidth is same regardless of orientation

[MartinKosicky]

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

I have a samsung s24+. The innerWidth X innerHeight is on portrait 1017x1871. When i rotate to landscape the resolution is 1002x409. All my rules always hit the col-lg.

So the question is , is bootstrap built to work for mobiles or I am missing something

Reduced test cases

this is all

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

Android

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

Chrome

What version of Bootstrap are you using?

5.3.3

[julien-deramond]

Hello @MartinKosicky
Bootstrap's responsive grid system is based on CSS media queries, which use the viewport width (in this case, innerWidth) to determine the applicable breakpoint classes.
Your device's viewport width in both orientations exceeds the lg breakpoint (992px). Bootstrap breakpoints apply the largest matching class, so as long as your viewport width is above 992px, the lg rules will apply, regardless of whether you're in portrait or landscape (see https://getbootstrap.com/docs/5.3/layout/grid/#grid-options).

If you want a specific rendering for this device, you could adjust by having orientation media queries (for portrait or landscape):

@media (orientation: landscape) {
  .my-class {
    /* Custom styles for landscape mode */
  }
}
@media (orientation: portrait) {
  .my-class {
    /* Custom styles for portrait mode */
  }
}

or add custom breakpoints, something like:

@media (max-width: 1002px) {
  .my-class {
    /* Override styles for narrow landscape widths */
  }
}

[MartinKosicky]

Also I am wondering if the max-width shouldnt also take into account the CM size of the display. Because the pixel density is so large, that everything seems so small.