最小高度的媒体查询 iOS Safari

Question

I'm developing a photo browser with the Bootstrap framework. It has a 4:3 aspect ratio that I'm trying to make responsive. My basic approach is something like this:

#carousel {
  width: 320px;
  height: 240px;
  ...
}

and then use media queries to support larger device widths and heights so that #carousel grows, but not any larger than the device, eg:

@media (min-width: 576px) and (min-height: 390px) {
  #carousel {
    min-width: 513px;
    min-height: 385px;
    border: 1px solid blue; /* test attribute */
  }
}

and so forth for larger devices.

This works fine overall and in the responsive testers built into Chrome and Safari. It does not work on my physical iPhone 13, however, which has a logical width/height of 390/844px. The previous media selector should fire when the phone is in landscape, but it doesn't. iPhone 13 in landscape mode doesn't fire until a much lower min-height in the media selector:

@media (min-width: 576px) and (min-height: 300px) {
  #carousel {
    min-width: 513px;
    min-height: 385px;
    border: 1px solid blue; /* test attribute */
  }
}

Note that min-height in the media selector is much lower than min-height in the CSS definition. If the height actually was 300px then the carousel should not fit on the screen, but it looks just fine. Just not very efficient or sustainable.

I suspect what's going on is that Safari is subtracting the height of its address bar and tabs from the height value. In fact I'm sure of it, because I get different behavior depending on whether I have one tab open or several. If there is only one tab open (and thus no tab bar) then I can get the media selector to fire at min-height: 333px but with multiple tabs I need to lower it to min-height: 300px . Neither one is actually correct, since if the user scrolls down in the browser then Safari hides the toolbar and makes the entire device height available (something similar happens on larger devices such as iPads).

Does anyone know how to query the effective display height from iOS Safari?

Answer 1

I solved this—reluctantly—with a media query condition that specifically targets the iPhone 12 Pro/13 in landscape mode:

@media (min-width: 576px) and (min-height: 300px),
    (device-width: 390px) and (orientation: landscape) {
  #carousel {
    min-width: 513px;
    min-height: 385px;
  }
}

This does what I want on iOS Safari. Unfortunately, it also applies to iOS Chrome, which has a different, smaller effective screen height. I haven't figured out an even remotely elegant solution to target iOS Safari without targeting iOS Chrome.