如何根据浏览器宽度动态修改PHP中的变量？

嘿，这个场景我太熟悉了！首先得明确：PHP是服务器端语言，它在页面发送到用户浏览器之前就已经执行完毕了，根本拿不到客户端的浏览器宽度或者屏幕尺寸——这就是为啥你单纯用PHP搞不定的原因。必须得结合前端JavaScript来实现，下面给你两种实用的方案，对应不同的需求：

方案一：前端直接动态调整布局（推荐，更流畅） #

如果你的需求只是调整页面上的.row和.col布局（就像你代码里做的那样，控制每行显示几个文章），那直接用JS修改DOM是最流畅的，不需要和后端交互。

第一步：PHP输出默认布局 #

先给$number一个默认值（比如桌面端的3列），保证页面加载时有基础布局：

<?php
// 默认桌面端每行3列
$number = 3;
$i = 0;

if (have_posts()) :
    echo '<div class="row">';
    while (have_posts()) : the_post(); $i++;
        // 输出你的文章内容模板
        echo '<div class="col">';
        the_title('<h3>', '</h3>');
        the_excerpt();
        echo '</div>';

        // 原来的换行逻辑，用默认值先渲染
        if (fmod($i, (int)$number) == 0 && $i != (int)$wp_query->post_count) {
            echo '</div><div class="row">';
        } elseif ($i == (int)$wp_query->post_count) {
            continue;
        }
    endwhile;
    echo '</div>';
endif;
?>

第二步：JS根据浏览器宽度动态调整布局 #

写一段JS，监听窗口加载和 resize 事件，根据视口宽度重新分组列元素：

// 核心调整函数
function adjustPostLayout() {
    const viewportWidth = window.innerWidth;
    let colsPerRow;

    // 根据视口宽度定义每行列数，可自行修改阈值
    if (viewportWidth < 576) {
        colsPerRow = 1; // 移动端单列
    } else if (viewportWidth < 768) {
        colsPerRow = 2; // 平板端两列
    } else {
        colsPerRow = 3; // 桌面端三列
    }

    // 1. 先把所有已有的.row拆成独立的.col元素
    document.querySelectorAll('.row').forEach(row => {
        row.replaceWith(...row.children);
    });

    // 2. 重新分组创建.row
    const allCols = document.querySelectorAll('.col');
    for (let i = 0; i < allCols.length; i += colsPerRow) {
        const newRow = document.createElement('div');
        newRow.classList.add('row');
        
        // 把当前组的列添加到新row里
        for (let j = i; j < i + colsPerRow && j < allCols.length; j++) {
            newRow.appendChild(allCols[j]);
        }

        // 把新row插入到DOM中
        if (allCols[i].parentNode) {
            allCols[i].parentNode.insertBefore(newRow, allCols[i]);
        }
    }
}

// 页面加载时执行一次
window.addEventListener('load', adjustPostLayout);
// 窗口大小改变时重新调整
window.addEventListener('resize', adjustPostLayout);

方案二：把宽度对应的number值传给PHP（适合后端逻辑需要用到的场景） #

如果你的后端PHP逻辑后续需要用到这个number值（比如分页、数据查询），那可以用AJAX把JS获取到的宽度对应的数值传给PHP，存在Session里供后续使用。

第一步：JS发送number值到PHP #

function sendLayoutNumberToPHP() {
    const viewportWidth = window.innerWidth;
    let number;

    if (viewportWidth < 576) number = 1;
    else if (viewportWidth < 768) number = 2;
    else number = 3;

    // 用fetch发送POST请求
    fetch('/your-custom-endpoint.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `layout_number=${number}`
    })
    .then(res => res.text())
    .then(data => {
        console.log('布局数值已同步到后端:', data);
        // 这里可以选择重新加载页面或者局部刷新
        // window.location.reload();
    })
    .catch(err => console.error('同步失败:', err));
}

// 页面加载和窗口resize时发送
window.addEventListener('load', sendLayoutNumberToPHP);
window.addEventListener('resize', sendLayoutNumberToPHP);

第二步：PHP接收并存储数值 #

创建your-custom-endpoint.php文件，接收并把数值存在Session：

<?php
session_start();

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $layoutNumber = isset($_POST['layout_number']) ? (int)$_POST['layout_number'] : 3;
    $_SESSION['layout_number'] = $layoutNumber;
    echo $layoutNumber;
    exit;
}
?>

第三步：PHP在主逻辑中使用Session里的数值 #

<?php
session_start();
// 优先用Session里的数值，没有就用默认值3
$number = isset($_SESSION['layout_number']) ? $_SESSION['layout_number'] : 3;

// 下面是你原来的循环逻辑
$i = 0;
if (have_posts()) :
    echo '<div class="row">';
    while (have_posts()) : the_post(); $i++;
        // ... 你的文章输出代码 ...

        if (fmod($i, (int)$number) == 0 && $i != (int)$wp_query->post_count) {
            echo '</div><div class="row">';
        } elseif ($i == (int)$wp_query->post_count) {
            continue;
        }
    endwhile;
    echo '</div>';
endif;
?>

最后说下：选浏览器宽度还是屏幕尺寸？ #

推荐用浏览器视口宽度（window.innerWidth），因为用户可能不会把浏览器最大化，视口宽度才是页面实际可用的显示空间，更贴合布局需求；屏幕尺寸是设备的物理尺寸，参考价值不如视口宽度。

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