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

我正在为我的网站创建一个媒体查询，我对手机浏览器的实际大小有问题

/* 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;
  }
}

我有100px的标题和56px高度的移动固定菜单，这给了我的内容740px高度的结果。问题是，在开发者工具中，它看起来很棒，但在移动设备中，我在页面底部获得了URL横幅和导航横幅，这给我带来了一个问题，我的页面太大，我有滚动条。我的问题是:

手机默认浏览器中没有横幅的内容的实际大小是多少？？

编辑

100vh对于Iphone XS Max，表示包括这两个红色框在内的所有视口高度。如何从视口高度减去那些红色框

---

不幸的是，就我所知，使用纯CSS是不可能的

然而，有一个解决办法。我在Louis Hoebregts的CSS技巧中找到了

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

假设我们的CSS自定义变量是--vh，这意味着我们希望在CSS中应用它，如下所示：

“因此，我们告诉JS获取视口的高度，然后将其钻取到总高度的1/100，这样我们就有了一个值作为视口高度单位值。然后我们礼貌地要求JS在：根处创建CSS变量（--vh）

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

[……]

我们可以通过收听窗口调整大小事件来更新--vh的值。这在用户旋转设备屏幕（如从横向旋转到纵向）或导航移动到滚动视图之外时非常方便。”

这里有一个可供您使用的代码片段

//首先我们得到视口高度，然后将其乘以1%，得到vh单位的值
设vh=window.innerHeight*0.01；
//然后我们将--vh custom属性中的值设置为文档的根
document.documentElement.style.setProperty（'--vh'，'${vh}px`）；
//我们收听调整大小事件
window.addEventListener（'resize'，（）=>{
//我们执行与以前相同的脚本
设vh=window.innerHeight*0.01；
document.documentElement.style.setProperty（'--vh'，'${vh}px`）；
});
正文{
背景色：#333；
保证金：0；
}
.模块{
高度：100vh；/*对于不支持自定义属性的浏览器，使用vh作为回退*/
高度：计算值（var（--vh，1vh）*100）；
保证金：0自动；
最大宽度：30%；
}
.模块项目{
对齐项目：居中；
显示器：flex；
身高：20%；
证明内容：中心；
}
.模块\项：第n个子项（奇数）{
背景色：#fff；
颜色：#F73859；
}
.module\u项：第n个子项（偶数）{
背景色：#F73859；
颜色：#F1D08A；
}

20%
40%
60%
80%
100%
实际手机尺寸从767px@Manikandan2811事实并非如此，这是移动设备最常用的媒体断点，但不是实际大小。此外，OP指的是身高，而不是身高width@Freestyle09您将无法覆盖所有移动设备，因为它们的高度不同。您可能会使用
height:calc（100vh-headerHeight）
headerHeight是一个变量？不，不是。您提到了
100px
，所以假设这是收割台高度。因此，最终的css将是
height:calc（100vh-100px）
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`);

// 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`);
});