如何在第一个页面加载时设置最小高度/宽度为屏幕高度/宽度

CSS, How do I set the min-height/width to the screen height/width only on first page load?

本文关键字：高度 小高 宽度 屏幕 设置 第一个 加载      更新时间：2023-09-26

让我解释一下这个问题，目前我已经设置了例如:

#masterpage {
    min-height: 100%;
    min-width: 100%;
    overflow: auto;
}

现在我想让它做的是;

当页面加载时，它将最小高度和最小宽度设置为代表100%的像素(这意味着，宽度将在高清屏幕上设置为1920，在旧屏幕上设置为1280)

但是在调整大小时，我不想让它再次改变，我只想让它保持原来的大小，这样我就可以放大和滚动页面。当然，这并不意味着它会永远保持这种状态，当刷新页面时，它应该只是重置自己(或者它可能实际上保存这个cookie)。

我已经尝试了很多事情来实现这一点，一些javascript和代码背后的一些东西，但不幸的是，我似乎没有得到实际所需的效果。有人解决过这个问题吗，或者有人知道如何解决这个问题吗?

获取页面加载事件的窗口宽度和高度，将它们存储在变量中，然后为窗口调整大小事件设置侦听器。触发后，将主容器的CSS的min/max-width和min/max-height设置为这些变量。

JQuery:如果你想获得正确的高度，你应该尝试窗口。加载事件，在所有图像和对象加载完成并且页面渲染完成后触发:

$(window).load(function() {
     var bodyHeight = $("body").height();
});

使用JavaScript:

window.onload = function(){
  var masterPage = document.getElementById('masterpage');
  masterPage.style.width = window.innerWidth;
  masterPage.style.height = window.innerHeight;
};

请尝试使用不同的高度/宽度单位。请使用"vm/vh"或"vmim/vmax"，而不是"percentage"。这些单位指的是视窗的百分比，而简单的百分比则定义了父元素的相对尺寸。(查看https://www.w3schools.com/cssref/css_units.asp上的相对长度部分)

那么，试试这样写:

#masterpage {
    min-height: 100vh;
    min-width: 100vm;
    overflow: auto;
}

祝你好运!

相关文章：