ASP.NET MVC项目模板移动端无法自适应100%宽度问题

问题根源 #

页面无法自适应移动端宽度，核心原因是DataTable默认不支持响应式布局，同时viewport配置不够完善，容器样式可能存在固定宽度限制。

具体修复步骤 #

1. 完善Viewport配置

修改_Layout.cshtml中的viewport meta标签，确保移动设备正确识别屏幕宽度：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />

2. 让DataTable适配移动端

有两种可选方案：

方案A：启用DataTable响应式插件

• 若项目未引入DataTable的Responsive扩展，先在BundleConfig.cs中添加资源绑定：

bundles.Add(new ScriptBundle("~/bundles/datatable-responsive").Include(
    "~/Scripts/DataTables/responsive.jquery.js"));
bundles.Add(new StyleBundle("~/Content/datatable-responsive").Include(
    "~/Content/DataTables/responsive.dataTables.css"));

• 在_Layout.cshtml中引用这些资源：

@Styles.Render("~/Content/css", "~/Content/datatable-responsive")
@Scripts.Render("~/bundles/jquery", "~/bundles/iziconference", "~/bundles/datatable-responsive")

• 修改DataTable初始化脚本，开启响应式：

var _atteendeesList = "at-attendees-list";

$("#" + _atteendeesList).DataTable({
    "paging": false,
    "info": false,
    "responsive": true,
    "language": {
        "search": "Pesquisar:",
        "info": "Participantes inscritos: _PAGES_"
    }
});

方案B：启用横向滚动（无需额外插件）

如果不想引入响应式插件，可让表格在移动端支持横向滚动，避免内容溢出：

var _atteendeesList = "at-attendees-list";

$("#" + _atteendeesList).DataTable({
    "paging": false,
    "info": false,
    "scrollX": true,
    "language": {
        "search": "Pesquisar:",
        "info": "Participantes inscritos: _PAGES_"
    }
});

3. 修复容器固定宽度限制

检查Site.css中content-wrapper和main-content的样式，移除固定宽度设置：

.content-wrapper {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px; /* 避免内容贴屏幕边缘 */
}

.main-content {
    max-width: 100%;
    width: 100%;
}

完成以上修改后，移动端页面即可自适应100%宽度。

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