是否可固定浏览器/文档宽度？如何强制窗口保持400px不被缩小？

Great questions! Let’s break this down into two clear scenarios since you’re asking about both document content width and browser window size control.

1. Keeping Document Width Fixed When Browser Window Shrinks #

If you just want your page’s content to stay at a fixed width (even when the user shrinks their browser), this is straightforward with CSS. The key is using min-width on your root container or <body> element to set a minimum width that the content won’t go below.

Here’s a simple example:

body {
  min-width: 400px; /* Ensures document never gets narrower than 400px */
  margin: 0;
  padding: 0;
}

/* Optional: Center your content for cleaner layout */
.main-content {
  width: 400px;
  margin: 0 auto;
  padding: 2rem;
  background: white;
}

When the user shrinks their browser below 400px, the browser will show a horizontal scrollbar instead of squishing your content. Your document will stay locked at 400px wide, so your layout won’t break.

2. Locking Browser Window to 400px (Preventing Resizing) #

This one is trickier because modern browsers restrict direct control over the main browser window’s size for security and user experience reasons. You can’t force the main window to stay exactly 400px wide if the user tries to shrink it—but there are workarounds depending on your use case:

Option 1: Control a Popup Window #

If you’re opening a new window from your page, you can specify its size and disable resizing using the window.open() method:

// Open a fixed-size, non-resizable window
const fixedWindow = window.open(
  '/your-target-page.html',
  'FixedWidthWindow',
  'width=400,height=600,resizable=no,scrollbars=yes'
);

The resizable=no parameter will prevent users from dragging the window edges to resize it. Note that some browsers might override this setting (especially if the user has strict privacy settings), but it works reliably in most cases.

Option 2: Visual Fix for the Main Window #

For the main browser window, you can’t block resizing, but you can make the content feel fixed. Combine the min-width CSS trick from scenario 1 with an optional warning for users when their window is too small:

body {
  min-width: 400px;
  background: #f5f5f5;
}

.main-content {
  width: 400px;
  margin: 0 auto;
  background: white;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  padding: 2rem;
}

/* Optional overlay to warn users about small windows */
#small-window-warning {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  color: white;
  text-align: center;
  padding-top: 2rem;
}

Add a bit of JavaScript to show the warning when the window is too narrow:

window.addEventListener('resize', () => {
  const warning = document.getElementById('small-window-warning');
  if (window.innerWidth < 400) {
    warning.style.display = 'block';
  } else {
    warning.style.display = 'none';
  }
});

This won’t stop the user from resizing the window, but it makes it clear that the content is designed for 400px width and prevents layout breakage.

Option 3: Full Control with Desktop Apps #

If you need absolute control over window size (e.g., for a desktop app), use a framework like Electron. It lets you set fixed window dimensions and disable resizing entirely:

// In Electron's main process
const { BrowserWindow } = require('electron');

const mainWindow = new BrowserWindow({
  width: 400,
  height: 600,
  resizable: false, // No resizing allowed
  // Alternatively, set min/max limits if you want partial resizing:
  // minWidth: 400,
  // maxWidth: 400,
});

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