如何根据屏幕分辨率动态切换HTML(PHP)中的指定PHP文件内容

嘿，我明白你现在的困扰——因为PHP是服务端运行的，它在页面发送到浏览器之前就执行完了，而屏幕分辨率是浏览器（客户端）的信息，所以直接在PHP里拿JS的变量确实行不通。不过有几个靠谱的方案能帮你实现需求，我给你拆解一下：

方案一：前端动态加载（最直接的实现方式） #

这个思路是先让页面加载基础结构，再用JS判断当前视口/屏幕的宽度，然后通过AJAX动态加载对应的PHP内容。完全不需要服务端额外配合，适合大部分场景。

示例代码：

<!-- 预留一个容器放动态内容 -->
<div id="dynamic-content"></div>

<script>
// 用window.innerWidth更准确，它获取的是当前浏览器视口宽度（包含滚动条）
// 比window.screen.width（物理屏幕分辨率）更贴合响应式场景
const viewportWidth = window.innerWidth;

// 设定你的分辨率阈值，比如1200px作为大屏/小屏的分界
const threshold = 1200;

// 加载对应PHP文件
function loadContent(url) {
  fetch(url)
    .then(response => {
      if (!response.ok) throw new Error('请求失败');
      return response.text();
    })
    .then(html => {
      document.getElementById('dynamic-content').innerHTML = html;
    })
    .catch(err => console.error('加载内容出错：', err));
}

if (viewportWidth >= threshold) {
  loadContent('large-screen-content.php');
} else {
  loadContent('small-screen-content.php');
}

// 可选：监听窗口大小变化，实时切换内容
window.addEventListener('resize', () => {
  const newWidth = window.innerWidth;
  if (newWidth >= threshold && document.getElementById('dynamic-content').dataset.type !== 'large') {
    loadContent('large-screen-content.php');
    document.getElementById('dynamic-content').dataset.type = 'large';
  } else if (newWidth < threshold && document.getElementById('dynamic-content').dataset.type !== 'small') {
    loadContent('small-screen-content.php');
    document.getElementById('dynamic-content').dataset.type = 'small';
  }
});
</script>

只要你的large-screen-content.php和small-screen-content.php能正常输出HTML（哪怕里面包含PHP动态逻辑，比如从数据库取数据），这个方案就能完美运行。

方案二：用Cookie传递分辨率，实现服务端初始渲染 #

如果必须让PHP在页面第一次加载时就决定渲染哪个文件（比如SEO需求，不想让内容通过JS加载），可以先通过JS把分辨率存在Cookie里，再刷新页面让PHP读取这个值。

步骤1：页面首次加载时用JS设置Cookie并刷新

<script>
// 检查是否已经存储过分辨率Cookie，避免无限刷新
if (!document.cookie.includes('viewportWidth')) {
  const width = window.innerWidth;
  // 设置Cookie，有效期1天，作用域为整个网站
  document.cookie = `viewportWidth=${width}; expires=${new Date(Date.now() + 86400000).toUTCString()}; path=/`;
  // 刷新页面让PHP读取Cookie
  window.location.reload();
}
</script>

步骤2：PHP读取Cookie并加载对应文件

<?php
// 从Cookie获取视口宽度，没有的话默认按小屏处理
$viewportWidth = isset($_COOKIE['viewportWidth']) ? (int)$_COOKIE['viewportWidth'] : 0;

// 设定阈值并加载对应文件
$threshold = 1200;
if ($viewportWidth >= $threshold) {
  include 'large-screen-content.php';
} else {
  include 'small-screen-content.php';
}
?>

这个方案能实现服务端初始渲染，但第一次加载会有一次刷新，用户体验稍打折扣。另外要注意，用户调整窗口大小后需要重新更新Cookie，你可以在resize事件里添加更新逻辑。

几个关键提醒 #

• 一定要加正确的视口标签：<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端的window.innerWidth会不准确。
• 优先用window.innerWidth而非window.screen.width，前者是当前浏览器实际可用的宽度，更符合响应式设计的需求。
• 如果AJAX加载的PHP内容需要用户登录状态，不用担心——AJAX请求默认会携带Cookie，只要你的PHP会话配置正常就能读取到用户信息。

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