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

Question

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

Answer 1

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

但是，好吧，如果你绝望的话，你可以。您可以通过 JavaScript:

的位获取 windows 的当前宽度

var width = window.innerWidth;

然后您可以调整 window 的大小：

window.resizeTo(800, 600)

注意 - 这仅在您使用 window.open()

创建 window 时有效

Answer 2

这是一个示例，其中的框彼此相邻，但由于屏幕尺寸太小而损坏。所以它们出现在彼此下方而不是彼此相邻。

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>

然而，使用这种方法或您尝试的方法意味着缺乏技巧和低质量的网站 non-responsive。优秀的 Web 开发人员会使用媒体查询更改设计，以防止溢出或 min-width 高于 320px（最小移动屏幕宽度）。

How can I prevent a user from making the browser window narrower than a predefined width in HTML and CSS?