chessboard.js棋盘无法随CSS media事件动态调整尺寸求助

问题根源 #

1. CSS选择器错误：你写的媒体查询用了#my-board，但HTML里的棋盘容器ID是#myBoard（大小写不一致），导致媒体查询根本没生效。
2. chessboard.js的初始化机制：这个库在初始化时会根据容器的当前尺寸生成固定大小的棋盘格子和棋子，之后单纯修改容器的CSS宽度，库不会自动重新计算布局，必须主动触发重绘。

解决方案 #

1. 修正CSS选择器 #

把媒体查询里的选择器改成和HTML一致：

@media only screen and (max-width: 600px) {
    #myBoard {
       width: 500px; /* 初始宽度700px */
    }
}

2. 监听窗口 resize 事件，触发棋盘重绘 #

chessboard.js提供了resize()方法，用来重新计算棋盘尺寸并适配容器大小。结合防抖函数避免频繁触发，代码如下：

首先确保你已经正确初始化了棋盘：

// 初始化棋盘（根据你的实际配置调整）
const gameBoard = Chessboard('myBoard', {
  position: 'start',
  // 其他配置项...
});

然后添加resize监听：

// 防抖函数，减少resize事件触发频率
function debounce(func, delay) {
  let timer;
  return function() {
    clearTimeout(timer);
    timer = setTimeout(func, delay);
  };
}

// 处理视口变化的逻辑
function adjustBoardSize() {
  // 调用chessboard.js的resize方法，重绘棋盘适配新容器尺寸
  gameBoard.resize();
}

// 给窗口添加防抖后的resize监听
window.addEventListener('resize', debounce(adjustBoardSize, 200));

额外优化：直接用相对单位替代固定宽度 #

如果不想依赖媒体查询，也可以给棋盘容器设置百分比宽度，让容器自动适配视口，再配合上面的resize监听，效果更流畅：

#myBoard {
    width: 90vw;
    max-width: 700px;
}

结论 #

这不是chessboard.js本身的问题，是选择器错误加上没有触发库的重绘机制导致的。按照上面的步骤修改后，棋盘就能在视口变化时动态调整尺寸，无需刷新页面，也就不会触发socket.io的断开连接逻辑了。

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