时间戳

首页 > 解决方案 > 如何获取视口高度，包括开发工具

javascript - 如何获取视口高度，包括开发工具

问题描述

我希望创建一个与浏览器窗口最大化时的视口大小完全相同的网页。为了实现这一点，我想为整个应用程序创建一个容器 div，其宽度/高度与最大化窗口视口的大小相同。如果所有用户都以最大化窗口（和 100% 缩放）打开此网页，使用

document.documentElement.clientWidth
document.documentElement.clientHeight

或者只是将css规则设置为：

#container{
    width: 100% //or 100vw;
    height: 100% ///or 100vh;

但这些只为您提供当前视口的尺寸。因此，获得最大化的视口需要一个小的解决方法。

通过从可用屏幕宽度中减去滚动条宽度可以获得宽度：

getContainerWidth(){
  let verticalScrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
  let containerWidth = screen.availWidth - verticalScrollBarWidth;
  return containerWidth}

获取高度稍微复杂一些，因为我们需要考虑浏览器 UI（标签/地址栏/书签）：

getContainerHeight(){
    let borwserUIHeight = window.outerHeight - window.innerHeight;
    let horizontalScrollBarHeight = window.innerHeight - document.documentElement.clientHeight;
    let containerHeight = screen.availHeight - (borwserUIHeight + horizontalScrollBarHeight);
    return containerHeight}

到目前为止，这似乎一直有效，直到......用户在打开开发工具的情况下加载页面。

发生这种情况时，似乎没有任何高度测量功能可以解释开发工具的高度。

是否有可能获得开发工具的高度？如果没有，我的方法是否可以解决，并且是否有更好的解决方案来满足我的要求 - 具有固定尺寸的网页，最大化视口的大小不响应窗口大小的变化？

ps

容器应该响应窗口大小变化的唯一情况是切换屏幕时，但这只需要使用新常量重新评估所需的大小。

标签： javascriptheightviewportdeveloper-tools

解决方案

推荐阅读