css - 媒体查询中窗口屏幕的实际大小

Question

我正在为我的网站创建一个媒体查询，但我对移动浏览器的实际大小有疑问。

/* iphone XS Max */
@media only screen and (min-device-width: 414px) and (max-device-width: 677px) and (max-device-height: 896px) and (-webkit-device-pixel-ratio: 3) {
  main#home {
    max-height: 740px;
  }
}

我的标题为 100 像素，移动固定菜单的高度为 56 像素，这为我的内容提供了 740 像素的高度。问题是，在开发人员工具中，它看起来很棒，但在移动设备中，我在页面底部看到了 URL 横幅和导航横幅，这给我带来了一个问题，即我的页面太大并且我有滚动条。我的问题是:

移动设备默认浏览器中没有横幅的内容的实际大小是多少？

编辑

100vh 对于 Iphone XS Max 意味着所有视口(viewport)高度也包括那两个红色框。如何从视口(viewport)高度中减去那些红色框？？

Answer 1

不幸的是，据我所知，使用纯 CSS 这是不可能的。

但是有一个解决方法。这是我在 Louis Hoebregts 的 CSS-Tricks 上找到的 here

“在 JavaScript 中，您始终可以通过使用全局变量 window.innerHeight 来获取当前视口(viewport)的值。该值将浏览器的界面考虑在内，并在其可见性发生变化时更新。诀窍是存储视口(viewport)值在 CSS 变量中并将其应用于元素而不是 vh 单元。

假设我们的 CSS 自定义变量在这个例子中是 --vh。这意味着我们要像这样在我们的 CSS 中应用它:“

CSS
    .my-element {
         height: 100vh; /* Fallback for browsers that do not support 
                      Custom Properties */
         height: calc(var(--vh, 1vh) * 100);
    }


JavaScript
// First we get the viewport height and we multiple it by 1% 
// to get a value for a vh unit
let vh = window.innerHeight * 0.01;

// Then we set the value in the --vh custom property to the 
// root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

“因此，我们告诉 JS 获取视口(viewport)的高度，然后将其向下钻取到总高度的 1/100，这样我们就有了一个值作为我们的视口(viewport)高度单位值。然后我们礼貌地要求 JS 创建:root 中的 CSS 变量 (--vh)。

因此，我们现在可以使用 --vh 作为我们的高度值，就像我们使用任何其他 vh 单位一样，将它乘以 100，我们就得到了我们想要的完整高度。

[...]

我们可以通过监听窗口调整大小事件来更新--vh 的值。这在用户旋转设备屏幕(例如从横向到纵向)或导航在滚动时移出 View 时非常方便。”

// We listen to the resize event
window.addEventListener('resize', () => {
    // We execute the same script as before
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
});

这是适合您的工作代码片段

// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);

// We listen to the resize event
window.addEventListener('resize', () => {
  // We execute the same script as before
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
});

body {
  background-color: #333;
  margin:0;
}

.module {
  height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  max-width: 30%;
}

.module__item {
  align-items: center;
  display: flex;
  height: 20%;
  justify-content: center;
}

.module__item:nth-child(odd) {
  background-color: #fff;
  color: #F73859;
}

.module__item:nth-child(even) {
  background-color: #F73859;
  color: #F1D08A;
}

<div class="module">
  <div class="module__item">20%</div>
  <div class="module__item">40%</div>
  <div class="module__item">60%</div>
  <div class="module__item">80%</div>
  <div class="module__item">100%</div>
</div>