Question

我正在尝试创建一个网页，该网页恰好是最大化浏览器窗口时视口的大小。为了实现此目的，我想为整个应用程序创建一个容器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}

获取高度稍微复杂一点，因为我们需要考虑浏览器的用户界面（标签/地址栏/书签）：

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

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

发生这种情况时，似乎没有一种高度测量功能可以说明开发工具的高度。

window.innerHeight / $（window）.outerHeight（）-包括滚动条（不包括开发工具）的视口高度
document.documentElement.clientHeight / $（window）.height（）/ $（window）.innerHeight（）-视图高度不包括滚动条（不包括开发工具）
window.outerHeight-浏览器窗口的高度
document.documentElement.scrollHeight / $（document）.height（）-似乎是所有可滚动内容的高度，但是为了使其等于所需的视图端口高度，必须全部准备好页面中某些内容的大小达到要求的高度-这是开始要解决的问题。

是否可以提高开发工具的高度？如果不是，我的方法是否可以解决？是否有更好的解决方案，我的要求-具有固定尺寸的网页，该网页的最大查看端口的大小不响应窗口大小的变化？

p.s

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

如何获取查看端口的高度，包括开发工具

0 个答案: