jQuery Tablesorter reflow在浏览器开发者工具正常但手机端显示异常

问题根因 #

• JS初始化选择器和实际HTML元素ID不匹配：代码中tablesorter初始化使用#table_ausgabe2作为选择器，但PHP输出的table标签未设置该ID，插件未正确初始化，移动端浏览器容错性更低直接暴露该问题
• 缺少移动端视口配置：未添加viewport元标签时，移动端默认会将页面渲染宽度模拟为980px，导致你设置的35em响应式断点未触发
• CSS属性错误：你写的text-align: bottom为无效属性，Safari等移动端浏览器对无效CSS的容错性低于Firefox，会导致表头伪元素样式失效
• 表格class提前硬编码重排类：ui-table-reflow类应由插件初始化时自动添加，提前写死会导致插件逻辑异常，无法自动给td注入data-title属性

修复方案 #

1. 修正PHP中table标签属性，添加对应ID，移除提前写死的重排类：

echo "<table id='table_ausgabe2' class='table table-striped tablesorter'>";

2. 在页面<head>标签中添加移动端视口配置，确保响应式断点计算正确：

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

3. 修正CSS中的无效属性，同时添加重排插件的兼容配置：

/* REQUIRED CSS: change your reflow breakpoint here (35em below) */
@media ( max-width: 35em ) {
    /* 解决bootstrap table-responsive横向滚动和重排逻辑的冲突 */
    .table-responsive {
        overflow-x: unset;
    }

    /* uncomment out the line below if you don't want the sortable headers to show */
    /* table.ui-table-reflow thead { display: none; } */

    /* css for reflow & reflow2 widgets */
    .ui-table-reflow td,
    .ui-table-reflow th {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        float: right;
        /* if not using the stickyHeaders widget (not the css3 version)
         * the "!important" flag, and "height: auto" can be removed */
        width: 100% !important;
        height: auto !important;
    }

    /* reflow widget only */
    .ui-table-reflow tbody td[data-title]:before {
        color: #469;
        font-size: .9em;
        content: attr(data-title);
        float: left;
        width: 50%;
        white-space: pre-wrap;
        /* 修正原无效属性text-align: bottom */
        vertical-align: middle;
        display: inline-block;
    }
}

4. 优化JS初始化逻辑，移除重复的DOM监听，添加reflow插件配置项：

// Tablesorter初始化
$(function() {
    $("#table_ausgabe2").tablesorter({
        theme: 'bootstrap',
        widgets: ["reflow"],
        widgetOptions: {
            reflow_className: 'ui-table-reflow',
            // 强制插件为td注入data-title属性
            reflow_dataAttrib: 'data-title'
        }
    });
});

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