单文件XLSX查看网站移动端自动放大问题求助

你的手机端页面自动放大，核心原因是表格内容宽度超出手机视口，即便设置了viewport，浏览器仍会自动放大以适配过宽内容。结合你的代码，给出以下修复方案：

1. 优化Viewport配置 #

更新viewport标签，添加user-scalable=no禁止用户缩放，补充viewport-fit=cover适配现代手机刘海/挖孔屏，确保视口完全贴合设备宽度：

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

2. 给表格添加横向滚动容器 #

表格列数较多无法在手机屏幕完全容纳，需添加横向滚动容器避免内容溢出撑大页面：

<!-- 替换原表格的直接输出，用容器包裹 -->
<div class="table-container">
    <table id="brshop">
        <!-- 表格内容保持不变 -->
    </table>
</div>

同时调整CSS样式，确保表格自适应容器：

.table-container {
    overflow-x: auto;
    margin-bottom: 20px;
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 600px; /* 设置最小宽度，避免列过度挤压 */
}

3. 优化单元格内容显示（可选） #

针对长内容单元格添加自动换行，避免单个单元格过宽：

th, td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

修改后的完整关键代码片段 #

<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>Lieferanzeige</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
    <style>
        body {
          font-size: 13px;
          font-family: "Open Sans", Arial, sans-serif;
          margin: 0;
          padding: 10px;
        }

        .geliefert {
          background-color: #b2f7d9;
        }

        select {
          width: 100%;
          padding: 10px;
          font-size: 20px;
          border: 1px solid #888;
          background-color: #f2f2f2;
          border-radius: 4px;
          box-sizing: border-box;
          margin-bottom: 10px;
        }

        .table-container {
            overflow-x: auto;
            margin-bottom: 20px;
        }

        table {
          border-collapse: collapse;
          width: 100%;
          min-width: 600px;
        }

        th,
        td {
          padding: 8px;
          border: 1px solid #ddd;
          text-align: left;
          font-size: 14px;
          word-wrap: break-word;
          overflow-wrap: break-word;
        }

        th {
          background-color: #f2f2f2;
          font-weight: bold;
          color: #333;
        }

        .header {
          background-color: #ddd;
          font-weight: bold;
          color: #333;
        }
    </style>
</head>
<body>
    <!-- 其余代码不变，直到表格输出部分 -->
    <?php if (isset($_GET['file'])) {?>
        <div class="head"> 
            <?php
                echo "Lieferstatus ";
                $flname = $fl;
                $flname = basename($flname, '.' . pathinfo($flname, PATHINFO_EXTENSION));
                if(substr($flname, -1) == 'H') {
                    echo $flname = 'Herbst ' . substr($flname, 0, -1);
                } elseif(substr($flname, -1) == 'F') {
                    echo $flname = 'Frühjahr ' . substr($flname, 0, -1);
                }
            ?>
        </div>
        
        <?php       
        $pfad = $dir."/".$fl;
        
        if (!file_exists($pfad)) {
            echo "Ausgewählte Datei nicht vorhanden!";
            exit();
        }

        if (!preg_match('/\.xlsx$/i', $pfad)) {
            echo "Kein XLSX File ausgewählt!";
            exit();
        }
        
        
        if ( $xlsx = SimpleXLSX::parse($pfad) ) {
            $pos = count($xlsx->rows());
            $pos = $pos-1;      
        
            echo "<b>".$pos."</b> Bestellpositionen in Datei: <b>".$fl."</b> gefunden!";
            echo '<div class="table-container">';
            echo '<table id="brshop">';
            $z=0;
            foreach ($xlsx->rows() as $r) {
                echo '<tr>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . (($z != 0) ? $z : '') . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . $r[0] . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . $r[1] . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . $r[3] . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . $r[5] . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . $r[6] . '</th>';
                echo '<th class="' . (($z == 0) ? 'header' : (($r[4] != "xxx") ? 'geliefert' : '')) . '">' . substr($r[4],0,11) . '</th>';

                echo '</tr>';
                $z++;
            }
            echo '</table>';
            echo '</div>';
        } else {
            echo SimpleXLSX::parseError();
        }
        
    }
    ?>
</body>
</html>

修复原理 #

• Viewport配置强制浏览器使用设备宽度作为视口，禁止缩放，从根源避免自动放大触发。
• 横向滚动容器让表格在手机端可左右滑动，既保留完整内容，又不会撑大页面。
• 单元格换行和最小宽度设置，保证内容可读性，避免表格列被过度挤压。

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