禁用 250px 以下的调整窗口大小

【问题标题】：Disabling resize window below 250px禁用 250px 以下的调整窗口大小
【发布时间】：2023-01-21 22:15:17
【问题描述】：

您好，我正在准备一个网站，发现在将窗口大小调整到 250 像素以下时，它失去了响应能力，尤其是在 Firefox 上。有没有办法，我可以禁用 250px 以下的调整大小；

我期望的是 javascript 会在低于 250px 时发出警报。我试过的是

$(function () {

    $(window).bind("resize", function () {
        console.log($(this).width())
        if ($(this).width() < 250) {
           alert('resizing below 250px may cause in losing of responsivity');
        }
    })
})

【问题讨论】：

您尝试的方法出了什么问题？
如果您的网站在 320px 上表现良好，那么您就可以继续使用，而在 320 像素以下则不用担心。我们制作的最小屏幕尺寸为 320 像素。

标签： javascript html css

【解决方案1】：

要禁止在特定宽度以下调整大小，您可以向网站的 CSS 添加最小宽度限制。例如，您可以将以下 CSS 规则添加到您的样式表中：

body {
    min-width: 250px;
}

这将防止网站宽度缩小到 250 像素以下。此外，您可以使用 javascript 检测窗口宽度，并在窗口低于特定宽度时显示警告消息。

$(window).on("resize", function () {
    if ($(this).width() < 250) {
        alert("Resizing below 250px may cause loss of responsiveness");
    }
});

您提供的脚本也可以正常工作，并且会在窗口宽度小于 250px 时提醒用户，这样您就可以防止用户将大小调整到限制以下

【讨论】：

这不会阻止用户更改窗口大小。将会发生的是浏览器将引入滚动条。