如何设置div宽度为100%并固定，页面缩放时不缩小？

嘿，这个需求完全可以实现！核心思路就是先记录页面刚加载时的视口宽度，然后把这个固定值硬给到你的div——这样不管用户怎么缩放页面，div都会牢牢保持初始的全屏宽度，不会跟着缩放后的页面尺寸缩小。

具体实现步骤： #

1. 初始CSS占位：先给div设置初始的100%宽度，让它在页面加载时占满屏幕，同时做一些基础样式保证效果。
2. JS记录并固定宽度：页面加载完成后，获取当时的视口宽度，把这个值以像素单位赋值给div的宽度，替换掉原来的百分比宽度。

代码示例：

首先是HTML结构：

<div id="fixed-fullwidth-div">这是一个保持初始全屏宽度的div</div>

然后是基础CSS：

#fixed-fullwidth-div {
  width: 100%; /* 初始占满屏幕 */
  background-color: #e6f7ff;
  padding: 1.5rem;
  box-sizing: border-box; /* 避免padding撑开宽度 */
  border: 1px solid #1890ff;
}

最后是关键的JavaScript：

// 页面完全加载后执行
window.addEventListener('load', function() {
  // 获取页面加载时的视口宽度（不含滚动条，更贴近可视区域）
  const initialViewportWidth = document.documentElement.clientWidth;
  const targetDiv = document.getElementById('fixed-fullwidth-div');
  // 将div宽度设置为初始视口的固定像素值
  targetDiv.style.width = `${initialViewportWidth}px`;
});

原理说明： #

浏览器的缩放功能本质上是按比例放大/缩小页面内容的显示尺寸，但不会改变元素的实际像素值。当我们把div的宽度从100%（相对当前视口）改成固定的[初始宽度]px后，它就不再依赖当前视口的尺寸，只会保持加载时的原始宽度。

额外注意点： #

• 如果需要包含滚动条的宽度，可以把document.documentElement.clientWidth换成window.innerWidth；
• 这段代码不会响应浏览器窗口大小的调整——如果需要窗口 resize 后重新固定新的全屏宽度，可以把逻辑放到resize事件监听里，但这和你“保持初始宽度”的需求不符，所以默认不添加；
• 测试时可以用浏览器的缩放快捷键（Ctrl+/Ctrl-）验证效果，缩放后div的宽度不会跟着缩小。

内容的提问来源于stack exchange，提问作者Hugh