html - 如何防止用户使浏览器窗口比 HTML 和 CSS 中的预定义宽度窄？

Question

我想知道如何防止用户使包含我的网页的浏览器窗口比预定义的宽度窄，因为 Firefox 自动定义的浏览器窗口的最小宽度会破坏我的布局。我该怎么做？谢谢！

score 1 · Accepted Answer

你不能。浏览器属于用户，他们可以用它做任何他们想做的事情。

但是，好吧，如果你绝望的话，你可以。您可以使用以下 JavaScript 获取窗口的当前宽度：

var width = window.innerWidth;

然后，您可以使用以下命令调整窗口大小：

window.resizeTo(800, 600)

注意 - 这仅适用于您创建的窗口window.open()

score 1 · Accepted Answer

这是一个相邻的盒子的例子，由于屏幕尺寸太小而被破坏。所以它们出现在彼此下方，而不是彼此相邻。

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  padding: 5px;
  float: left;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

通过简单地添加body { min-width: 1200px; overflow: auto/scroll; }，我们定义了网站的最小宽度。这样，现在所有框都出现在一行中。如果用户浏览器小于 1200px，他们将获得一个水平滚动条。

body {
  min-width: 1200px;
  overflow-x: auto;
}

div {
  height: 100px;
  width: 100px;
  border: 2px solid black;
  padding: 5px;
  float: left;
}

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>

但是，使用这种方法或您尝试的方法意味着缺乏技能和低质量的网站，因为它没有响应。优秀的 Web 开发人员会使用媒体查询更改设计，以防止溢出或高于 320 像素（最小的移动屏幕宽度）的最小宽度。

2 回答 2