如何根据屏幕尺寸在JavaScript中调用PHP的echo输出值？

嘿，看你的需求是想通过PHP循环生成表格内容，再根据屏幕尺寸切换显示不同布局对吧？我给你两种实用的实现思路，你可以根据自己的场景来选～

方案一：JavaScript动态生成（适合数据量大或需要实时响应） #

这种方式是先让PHP把所有需要的布局数据传递给JS，再通过JS监听屏幕尺寸来动态渲染内容，避免初始页面加载过多DOM节点：

<?php 
// 先把每行的两种布局存到数组里
$tableContent = [];
foreach( $data as $row ){ 
    // 桌面端布局
    $desktopRow = "<tr>
        <td><strong>Name</strong></td>
        <td><strong>Price (USD)</strong></td>
        <td>{$row['name']}</td>
        <td>{$row['price']}</td>
    </tr>";
    // 移动端布局（补全你省略的内容）
    $mobileRow = "<tr>
        <td><strong>Rank</strong></td>
        <td><strong>Name</strong></td>
        <td>{$row['rank']}</td>
        <td>{$row['name']}</td>
    </tr>";
    
    $tableContent[] = [
        'desktop' => $desktopRow,
        'mobile' => $mobileRow
    ];
}
?>

<!-- 页面里准备一个表格容器 -->
<table id="dynamic-table"></table>

<script>
// 把PHP数组转成JS可识别的格式（用json_encode避免引号转义问题）
const tableData = <?php echo json_encode($tableContent); ?>;
const tableEl = document.getElementById('dynamic-table');

// 定义渲染函数
function renderTable() {
    // 自定义屏幕断点，这里用768px作为移动端/桌面端分界
    const isMobile = window.innerWidth < 768;
    // 清空表格再重新渲染
    tableEl.innerHTML = '';
    tableData.forEach(item => {
        tableEl.innerHTML += isMobile ? item.mobile : item.desktop;
    });
}

// 页面加载时渲染一次
window.addEventListener('load', renderTable);
// 窗口大小改变时重新渲染
window.addEventListener('resize', renderTable);
</script>

方案二：CSS媒体查询控制（简单易维护，适合数据量小） #

如果你的数据量不大，直接用PHP生成两种完整表格，再通过CSS媒体查询控制显示隐藏会更简单，不需要写复杂的JS：

<!-- 桌面端表格 -->
<table class="table-desktop">
    <?php foreach( $data as $row ){ ?>
    <tr>
        <td><strong>Name</strong></td>
        <td><strong>Price (USD)</strong></td>
        <td><?php echo $row['name']; ?></td>
        <td><?php echo $row['price']; ?></td>
    </tr>
    <?php } ?>
</table>

<!-- 移动端表格 -->
<table class="table-mobile">
    <?php foreach( $data as $row ){ ?>
    <tr>
        <td><strong>Rank</strong></td>
        <td><strong>Name</strong></td>
        <td><?php echo $row['rank']; ?></td>
        <td><?php echo $row['name']; ?></td>
    </tr>
    <?php } ?>
</table>

<style>
/* 默认显示桌面端表格，隐藏移动端 */
.table-mobile { display: none; }

/* 当屏幕宽度小于768px时，切换显示移动端表格 */
@media (max-width: 767px) {
    .table-desktop { display: none; }
    .table-mobile { display: table; }
}
</style>

小提示 #

• 方案一适合数据量较大的场景，能减少初始DOM节点数量；方案二更直观，维护成本低，适合简单布局。
• 屏幕断点可以根据自己的需求调整，比如改成640px或者其他数值。
• 用json_encode传递PHP数据给JS时，会自动处理引号转义，比直接echo字符串更安全，避免语法错误。

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