如何根据视口宽度提供适配移动端与桌面端的不同HTML表格版本

问题1：你的原型方案是否可行 #

方案本身可以跑通，但完全没必要使用，存在多个明显缺陷：

• 额外增加了网络请求开销，会拖慢首屏加载速度，降低用户体验
• 无法适配用户动态缩放浏览器窗口的场景，视口宽度变化后需要重新发请求才能更新表格
• 前后端都要额外开发维护接口逻辑，开发成本远高于需求本身的复杂度

问题2：更优的实现方案 #

推荐按优先级从高到低选以下方案：

方案1：纯CSS媒体查询实现（首选，开发成本最低） #

你完全可以直接在.NET Core的Razor视图里同时输出两份表格结构，分别对应桌面端和移动端，用CSS控制不同断点下的显示隐藏即可，不需要写任何JS和额外接口：

/* 桌面端默认样式 */
.table--desktop {
  display: table;
}
.table--mobile {
  display: none;
}

/* 600px以下移动端断点 */
@media (max-width: 599px) {
  .table--desktop {
    display: none;
  }
  .table--mobile {
    display: table;
  }
}

如果两份表格有大量重复内容，你可以把公共的单元格内容抽成Razor局部视图，避免重复编码。该方案适配窗口缩放无延迟，性能最好。

方案2：前端本地JS动态切换（适合不想渲染两份DOM的场景） #

你不需要请求后端接口，直接在前端提前写好两种表格的模板，页面加载和窗口缩放时检测视口宽度，本地替换DOM即可：

// 获取视口宽度
function getViewportWidth() {
  return window.innerWidth || document.documentElement.clientWidth;
}

// 切换表格结构
function renderAdaptiveTable() {
  const container = document.getElementById('table-wrap');
  const viewWidth = getViewportWidth();
  if (viewWidth < 600) {
    // 插入移动端带rowspan的表格结构
    container.innerHTML = `<table>移动端表格代码</table>`;
  } else {
    // 插入桌面端常规表格结构
    container.innerHTML = `<table>桌面端表格代码</table>`;
  }
}

// 页面加载时执行
window.addEventListener('load', renderAdaptiveTable);
// 窗口大小变化时执行，可选
window.addEventListener('resize', renderAdaptiveTable);

如果实在想要后端渲染对应表格，也不需要单独做接口，直接在.NET Core渲染页面的时候，可以通过请求头的User-Agent判断设备类型，直接输出对应版本的表格即可，不过User-Agent判断的准确率不如视口宽度判断，优先级低于前两种方案。

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