如何根据Modernizr添加的HTML类编写PHP条件语句切换内容？

首先得明确一个关键问题：PHP是服务器端语言，而Modernizr是在浏览器加载页面后通过JavaScript给<html>标签添加的类——服务器在渲染页面的时候，<html>还没有这个类，所以你没法直接用PHP去检测前端DOM的类名。

要实现你的需求，核心思路是把前端Modernizr的判断结果传递给PHP，常见的两种方式是用Cookie或者Session，下面给你具体的实现步骤：

方案一：通过Cookie传递判断结果 #

这种方式适合跨页面保持判断状态，第一次访问可能需要刷新才生效，后续访问会自动识别。

1. 前端JavaScript代码（获取Modernizr的判断结果并设置Cookie） #

你可以用原生JS或者jQuery来实现：

// 原生JS版本
document.addEventListener('DOMContentLoaded', function() {
  const htmlTag = document.documentElement;
  // 检测是否有no-touchevents类，0代表非触摸，1代表支持触摸
  const touchStatus = htmlTag.classList.contains('no-touchevents') ? '0' : '1';
  // 设置Cookie，有效期设为30天，路径覆盖全站
  document.cookie = `is_touch=${touchStatus}; path=/; max-age=${60*60*24*30}`;
});

// jQuery版本（如果你已经在用jQuery）
$(document).ready(function() {
  const touchStatus = $('html').hasClass('no-touchevents') ? '0' : '1';
  document.cookie = `is_touch=${touchStatus}; path=/; max-age=${60*60*24*30}`;
});

2. PHP端读取Cookie并做条件判断 #

在你需要显示不同内容的PHP页面中，读取Cookie值来分支渲染：

// 默认假设非触摸设备（第一次访问还没设置Cookie时的 fallback）
$isTouchEnabled = isset($_COOKIE['is_touch']) ? ($_COOKIE['is_touch'] === '1') : false;

if ($isTouchEnabled) {
    // 显示触摸设备专属内容
    echo '<div class="touch-only">欢迎使用触摸设备，这里是专为你优化的操作区域</div>';
} else {
    // 显示非触摸设备（比如桌面端）的内容
    echo '<div class="non-touch-only">欢迎使用桌面设备，你可以用鼠标更精准地操作</div>';
}

方案二：通过Session传递判断结果（会话内即时生效） #

如果希望第一次访问就能即时生效，不用刷新页面，可以用AJAX把前端判断结果传给PHP保存到Session里：

1. 前端AJAX代码（jQuery示例） #

$(document).ready(function() {
  const isTouch = $('html').hasClass('no-touchevents') ? 0 : 1;
  // 发送请求到PHP接口保存Session
  $.ajax({
    url: 'save-touch-status.php',
    method: 'POST',
    data: { is_touch: isTouch },
    success: function() {
      // 保存成功后刷新页面，让PHP读取Session并渲染对应内容
      location.reload();
    }
  });
});

2. 保存Session的PHP接口（save-touch-status.php） #

<?php
session_start();
if (isset($_POST['is_touch'])) {
    // 把判断结果转成布尔值存在Session里
    $_SESSION['is_touch'] = (int)$_POST['is_touch'] === 1;
}

3. 主页面的PHP判断逻辑 #

<?php
session_start();
// 优先读取Session，没有则默认非触摸
$isTouchEnabled = isset($_SESSION['is_touch']) ? $_SESSION['is_touch'] : false;

if ($isTouchEnabled) {
    echo '<p>这是触摸设备可见的内容</p>';
} else {
    echo '<p>这是非触摸设备可见的内容</p>';
}

注意事项 #

• 第一次访问时，Cookie/Session还没设置，PHP会用默认值（我们设的是false即非触摸），刷新一次后就能拿到正确的判断结果；
• 如果追求第一次访问就100%准确，也可以直接用服务器端的User-Agent检测，但这种方法不如Modernizr精准——毕竟有些桌面浏览器也支持触摸，有些移动设备可能禁用了触摸功能；
• 如果你不需要服务器端渲染不同内容，其实直接用前端JS切换显示/隐藏会更简单，比如一开始把两种内容都渲染，然后根据类名控制显示状态。

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