移动端点击登录/注册链接跳转至独立页面的实现方案

JavaScript 方案 #

实时检测屏幕尺寸，点击链接时根据当前设备宽度决定行为：

// 获取登录/注册链接元素
const authLink = document.querySelector('.btn--show-modal');

authLink.addEventListener('click', function(e) {
  // 定义移动端断点（可根据需求调整，比如768px）
  const isMobile = window.matchMedia('(max-width: 768px)').matches;
  
  if (isMobile) {
    // 阻止模态框触发，跳转到独立登录页
    e.preventDefault();
    window.location.href = '/login-register'; // 替换为你的独立页面URL
  }
  // 非移动端不做处理，保持原有模态框逻辑
});

优点：能实时响应窗口尺寸变化（比如用户拖拽浏览器窗口变小），无需修改HTML结构。

CSS + 锚点方案 #

通过媒体查询切换两个不同功能的链接，无JS依赖：

首先修改HTML，添加一个默认隐藏的跳转链接：

<li class='nav__item'>
  <!-- 桌面端模态框链接 -->
  <a data-modal='modal-all' class='md-trigger nav__link nav__link--btn btn--show-modal' href='#'>
    <i class='fa fa-fw fa-sign-in'></i> Log In/Register
  </a>
  <!-- 移动端跳转链接，默认隐藏 -->
  <a href='/login-register' class='nav__link nav__link--btn btn--redirect-modal' style='display: none;'>
    <i class='fa fa-fw fa-sign-in'></i> Log In/Register
  </a>
</li>

然后添加CSS媒体查询：

/* 移动端显示跳转链接，隐藏模态框链接 */
@media (max-width: 768px) {
  .btn--show-modal {
    display: none !important;
  }
  .btn--redirect-modal {
    display: block !important;
  }
}

/* 桌面端反之 */
@media (min-width: 769px) {
  .btn--redirect-modal {
    display: none !important;
  }
}

优点：纯CSS实现，性能好，适合不需要实时响应窗口变化的场景。

EJS 模板引擎方案 #

在服务端根据用户设备类型渲染对应链接，更利于SEO：

在EJS模板中添加条件判断，通过User-Agent识别移动设备：

<% 
// 简单的移动设备UA检测逻辑，可按需扩展
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(req.headers['user-agent']);
%>

<li class='nav__item'>
  <% if (isMobile) { %>
    <!-- 移动端渲染跳转链接 -->
    <a href='/login-register' class='nav__link nav__link--btn'>
      <i class='fa fa-fw fa-sign-in'></i> Log In/Register
    </a>
  <% } else { %>
    <!-- 桌面端渲染模态框链接 -->
    <a data-modal='modal-all' class='md-trigger nav__link nav__link--btn btn--show-modal' href='#'>
      <i class='fa fa-fw fa-sign-in'></i> Log In/Register
    </a>
  <% } %>
</li>

优点：服务端直接输出对应内容，避免前端切换的延迟，对搜索引擎更友好。

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