我正在用Bootstrap框架开发一个照片浏览器，它的长宽比是4：3，我试图让它响应迅速，我的基本方法是这样的：

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

然后使用媒体查询来支持更大的设备宽度和高度，使得#carousel增长，但不大于设备，例如：

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

对于较大的器件也是如此。
这在整体上以及Chrome和Safari内置的响应测试器中运行良好。但在我的实体iPhone 13上 * 不 * 工作，它的逻辑宽度/高度为390/844 px。之前的媒体选择器应该在手机处于横向模式时启动，但它没有。处于横向模式的iPhone 13直到媒体选择器中的最小高度低得多时才会启动：

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

注意媒体选择器中的min-height比CSS定义中的min-height要低得多。如果高度实际上是300 px，那么carousel应该不适合屏幕，但它看起来还不错。只是效率不高或可持续性不强。
我怀疑Safari正在从高度值中减去地址栏和标签页的高度，事实上我很确定这一点。因为我得到不同的行为取决于我是打开了一个标签还是几个。如果只有一个标签打开（因此没有标签栏），然后我可以让媒体选择器在min-height: 333px处启动，但对于多个标签，我需要将其降低到min-height: 300px。实际上这两个都不正确，因为如果用户在浏览器中向下滚动，Safari就会隐藏工具栏，并显示整个设备的高度（类似的情况也发生在iPad等较大的设备上）。
有人知道如何从iOS Safari中查询 * 有效 * 显示高度吗？