如何禁用窗口缩小至250px以下？附JavaScript尝试代码

优化弹窗提示（避免重复触发） #

你原来的代码会在窗口调整过程中反复弹出提示，体验很差。可以加一个状态变量，只在首次缩小到250px以下时弹出提示，恢复到阈值以上后重置状态：

$(function () {
    let hasWarned = false;
    $(window).on("resize", function () {
        const currentWidth = $(this).width();
        if (currentWidth < 250 && !hasWarned) {
            alert('窗口宽度小于250px可能导致页面失去响应');
            hasWarned = true;
        } else if (currentWidth >= 250 && hasWarned) {
            hasWarned = false;
        }
    });
});

用CSS限制页面最小宽度（防止内容塌陷） #

从视觉层面避免页面被过度挤压，可以给页面的根容器设置最小宽度，这样即使窗口缩小，内容也不会乱掉，超出部分会显示横向滚动条：

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

尝试强制调整窗口大小（注意局限性） #

浏览器出于安全限制，主窗口几乎不允许脚本直接修改尺寸。但如果是你通过window.open创建的弹窗，可以尝试在resize时强制拉回宽度：

// 仅对脚本打开的弹窗有效
window.addEventListener('resize', function() {
    if (window.innerWidth < 250) {
        window.resizeTo(250, window.innerHeight);
    }
});

主窗口下这个方法大概率会被浏览器拦截，不建议依赖。

推荐方案 #

优先结合CSS最小宽度和优化后的弹窗提示，既能保证页面结构稳定，又能在用户过度缩小窗口时给出友好提醒，同时避免重复弹窗的问题。

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