如何使用CSS将用户重定向至移动端友好页面？

嘿，这个问题问得很实在！直接给你拍板：仅用纯CSS是没办法实现页面重定向的。原因很简单——CSS是用来控制页面样式和布局的样式语言，它没有权限触发浏览器的导航跳转行为，这类功能属于浏览器的核心交互逻辑，得靠HTML、JavaScript或者服务器端代码来实现。

为什么CSS做不到？ #

CSS的能力边界就是选择DOM元素、修改样式、控制布局（比如媒体查询适配移动端布局），最多加些动画效果，但它完全没有办法让浏览器加载一个新的URL地址。哪怕你用媒体查询识别了移动端，也没法通过CSS指令让页面跳转到移动端专属页面。

可行的替代方案 #

既然纯CSS走不通，给你几个实用的替代思路：

1. JavaScript + 媒体查询（前端最常用）

用几行简单的JS代码，结合屏幕宽度检测，就能实现移动端自动跳转。这种方案轻量且易实现：

// 页面加载时检测一次
window.addEventListener('load', function() {
  // 自定义移动端阈值，比如768px
  const mobileThreshold = 768;
  const mobilePageUrl = '/mobile-friendly-page.html'; // 替换成你的移动端页面地址
  
  if (window.innerWidth <= mobileThreshold && !window.location.pathname.includes('mobile')) {
    window.location.href = mobilePageUrl;
  }
});

// 可选：监听窗口大小变化，适配用户调整窗口或缩放的场景
window.addEventListener('resize', function() {
  const mobileThreshold = 768;
  const mobilePageUrl = '/mobile-friendly-page.html';
  
  if (window.innerWidth <= mobileThreshold && !window.location.pathname.includes('mobile')) {
    window.location.href = mobilePageUrl;
  }
});

2. 服务器端设备检测（最可靠）

如果你的项目有后端支持，直接在服务器层面检测用户的User-Agent标识，判断是移动设备就自动重定向到移动端页面。这种方案不受前端JS禁用的影响，准确性更高。比如用Nginx配置、PHP、Node.js等都能实现。

举个Nginx的简单配置示例：

server {
  listen 80;
  server_name your-domain.com;
  
  if ($http_user_agent ~* (mobile|android|iphone|ipad)) {
    rewrite ^/$ /mobile.html permanent;
  }
  
  # 其他配置...
}

3. HTML Meta Refresh（不推荐）

虽然HTML的meta标签可以实现跳转，但它没办法结合移动端检测——要么固定时间强制跳转，要么完全不跳，体验很差（用户可能还没看清内容就被跳走了），所以只作为备选，不推荐使用：

<!-- 0秒后跳转到移动端页面，但无法区分设备 -->
<meta http-equiv="refresh" content="0; url=/mobile.html">

总结 #

纯CSS确实没法完成重定向需求，但上面的方案都能轻松解决问题。如果只能前端处理，选JS+媒体查询就足够；如果追求可靠性和兼容性，服务器端检测是最优解。

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