如何用JavaScript实现用户名后显示用户设备图标（移动端/桌面端/平板）

先把你的HTML结构补全，把用户名和专门放图标的容器加进去：

<li data-memberId="{$row['member_id']}">
  <span class="username">{$row['username']}</span>
  <i class="device-icon"></i>
</li>

别用document.write了，这玩意在页面加载完成后调用会直接覆盖整个页面，坑得很。给你两种靠谱的实现方法：

方法一：用JS动态判断设备并设置图标类 #

// 拿到所有图标容器
const deviceIcons = document.querySelectorAll('.device-icon');

// 写个函数判断设备类型并设置图标
function updateDeviceIcon() {
  const isMobile = window.matchMedia("(max-width: 767px)").matches;
  const isTablet = window.matchMedia("(min-width: 768px) and (max-width: 1024px)").matches;
  const isDesktop = window.matchMedia("(min-width: 1025px)").matches;

  deviceIcons.forEach(icon => {
    // 先清掉之前的图标类
    icon.classList.remove('fa-mobile', 'fa-tablet', 'fa-desktop');
    // 添加对应设备的图标类
    if (isMobile) {
      icon.classList.add('fa-mobile');
    } else if (isTablet) {
      icon.classList.add('fa-tablet');
    } else {
      icon.classList.add('fa-desktop');
    }
  });
}

// 页面加载完执行一次
window.addEventListener('load', updateDeviceIcon);
// 窗口大小变化时重新判断
window.addEventListener('resize', updateDeviceIcon);

方法二：用CSS媒体查询直接控制（无需JS） #

如果只是纯靠屏幕尺寸切换图标，用CSS更简单，HTML结构保持上面的即可：

/* 默认显示桌面图标 */
.device-icon::before {
  content: "\f108"; /* 对应Font Awesome桌面图标编码，可根据你用的版本调整 */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  margin-left: 8px;
}

/* 平板设备切换图标 */
@media (min-width: 768px) and (max-width: 1024px) {
  .device-icon::before {
    content: "\f10a"; /* 对应Font Awesome平板图标编码 */
  }
}

/* 移动设备切换图标 */
@media (max-width: 767px) {
  .device-icon::before {
    content: "\f10b"; /* 对应Font Awesome移动设备图标编码 */
  }
}

注意事项 #

• 必须先引入Font Awesome库，否则图标无法显示，比如在页面<head>中添加：

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  

• 媒体查询的断点可以根据你的实际需求调整，上述767px、1024px是行业常用的断点值。

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