为何JavaScript中window.resizeTo()无法将窗口缩至设定的较小尺寸？

问题根源 #

Windows 10系统中，Chrome（含Eel集成的Chrome内核）的window.resizeTo()方法计算的是整个窗口的外部尺寸（包含标题栏、窗口边框），而你设定的310px×600px是期望的内容区域大小。Windows的窗口边框和标题栏会占用部分像素，导致实际内容区域被压缩，最终窗口外尺寸被系统调整后，内容区域就变成了295px×561px。

而Ubuntu（Linux）的窗口管理器对resizeTo()的处理逻辑不同，它会直接将你设置的尺寸应用到内容区域，因此显示正常。

另外你的JS代码存在语法错误：showaside()函数末尾缺少闭合的}，可能导致函数执行异常，建议先修复。

解决方法 #

方法1：用Python-Eel直接控制窗口尺寸（推荐） #

Eel自带窗口尺寸控制API，直接在Python代码中设置内容区域尺寸，可避免系统差异：

import eel

eel.init('web')
# 启动时指定内容区域尺寸为310×600
eel.start('index.html', size=(310, 600), chrome_args=["--no-sandbox"])

切换侧边栏时，通过Eel双向调用让Python端调整尺寸：

// 前端JS
function showaside(){
    if(sideBar.style.display !== "none"){
        sideBar.style.display = "none";
        eel.adjust_window_size(310, 600);
    } else {
        sideBar.style.display = "block";
        eel.adjust_window_size(510, 600);
    }
}

# Python端
@eel.expose
def adjust_window_size(width, height):
    eel.set_size(width, height)

方法2：在JS中补偿Windows窗口边框偏移 #

如果坚持用前端JS处理，可先计算窗口边框和标题栏的像素占用，再调整resizeTo()的数值：

sideBar.style.display = "none";

function getWindowOffset() {
    // 计算窗口外尺寸与内容区域的差值
    const widthOffset = window.outerWidth - window.innerWidth;
    const heightOffset = window.outerHeight - window.innerHeight;
    return { width: widthOffset, height: heightOffset };
}

function setsize(){
    const offset = getWindowOffset();
    let targetWidth, targetHeight;
    if (sideBar.style.display !== "none"){
        targetWidth = 510 + offset.width;
        targetHeight = 600 + offset.height;
    } else {
        targetWidth = 310 + offset.width;
        targetHeight = 600 + offset.height;
    }
    window.resizeTo(targetWidth, targetHeight);
};

function showaside(){
    if(sideBar.style.display !== "none"){
        sideBar.style.display = "none";
    } else {
        sideBar.style.display = "block";
    }
    setsize();
} // 修复缺失的闭合括号

注：这种方法需注意Windows不同主题下边框尺寸可能有差异，兼容性略逊于方法1。

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