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

Question

我想知道这是否是一种阻止页面加载后调整大小的方法。我有一个像这样编码的标题：

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

我是否可以在页面加载后阻止宽度调整大小，这样如果有人缩放或调整其网页大小，标题将保持为加载页面时设置的100％？

提前致谢！

Answer 1

您必须使用一些JS将标题元素的宽度设置为特定宽度，以便重新调整大小和缩放不会影响它。

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

<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() );

JSFiddle：https://jsfiddle.net/w9psx3t7/1

这里发生的是我们使用JavaScript告诉我们当元素宽度为100％时元素的宽度。然后我们通过style属性将该宽度直接应用于元素。 jQuery的width()方法允许我们检索和设置元素的宽度。由于宽度直接在元素上设置，因此它将覆盖CSS设置的默认宽度值。

请注意，一旦页面加载，我们的JS就设置了值，当你重新调整大小时<header>元素保持宽度。

Answer 2

如果您的意思是阻止用户放大，那么请在此处回答：Prevent zoom cross-browser

如果您想阻止用户调整浏览器窗口的大小（并且通常始终保持相同的大小），您可以执行以下操作：

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

但两者都被建议不要这样做。我真的不明白为什么你会想要这种行为。

Answer 3

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

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