页面加载后防止百分比调整大小

Question

我想知道这是否是一种防止页面加载后调整大小的方法。我有一个 header 编码如下：

header {
    position: fixed;
    top: 0%;
    left: 0%;
    height: 60px;
    width: 100%;
    margin: 0% auto;
}

我可以防止页面加载后调整宽度，这样如果有人缩放或调整他们的网页，header 将保持在加载页面时设置的 100% 吗？

提前致谢！

Answer 1

如果你的意思是阻止用户放大，那么这里就是答案：Prevent zoom cross-browser

如果你想阻止用户调整他们的浏览器window（并且通常始终保持相同大小），你可以这样做：

window.addEventListener('resize', function() {
    window.resizeTo(width, height);
});

两者都是建议不要使用的。我真的不明白你为什么想要这种行为。

Answer 2

如果您将宽度设置为 100%，我不知道在 CSS 中执行此操作的方法。在 Javascript 中执行此操作的简单方法是在页面加载时执行以下操作：

var width = document.getElementsByTagName("header")[0].offsetWidth;
document.getElementsByTagName("header")[0].style.width = width;

Answer 3

您将不得不使用一些 JS 将 header 元素的宽度设置为特定宽度，以便 re-size 和缩放不会影响它。

这是一个 jQuery 使用 width 的解决方案。

<div>
  <header class="to-fixed">Header</header>
</div>

div {
  min-height: 250px;
  background-color: #CCC;
}
header {
  height: 50px;
  background-color: yellow;
}

var $to_fixed = $( '.to-fixed' );

$to_fixed.width( $to_fixed.width() );

这里发生的是我们使用 JavaScript 来告诉我们元素在 100% 宽度时的宽度（以像素为单位）。然后我们通过 style 属性将该宽度直接应用于元素。 jQuery 的 width() 方法允许我们检索和设置元素的宽度。由于宽度是直接在元素上设置的，它将覆盖 CSS.

设置的默认宽度值

请注意，一旦页面加载完毕，我们的 JS 就会设置值，当您 re-size 时，<header> 元素会保持其宽度。

Prevent percentage resize after page load