如何避免仅桌面端显示DOM元素时出现闪烁问题？

嘿，这个闪烁问题确实挺闹心的——用户刚打开页面，元素先晃一下再消失，体验感直接打折扣。咱们来搞定它，同时精准区分真正的桌面设备（哪怕屏幕只有1300px）和移动设备（比如1366px的iPad）。

为什么原来的方案会闪烁？ #

你之前用的$(document).ready()是在DOM加载完成后才执行移除操作，这意味着浏览器已经先把#desktop-only渲染出来了，之后才删掉它，自然会出现闪烁。核心解决思路就是：在元素开始渲染之前就完成设备判断，提前控制它的显示状态。

替代方案1：UA检测 + 提前CSS控制（最推荐） #

咱们不用依赖jQuery.browser.mobile，自己写UA检测逻辑，而且把检测代码放在<head>里，早于页面元素加载的时机，再配合CSS直接控制显示，从根源避免闪烁。

步骤如下：

1. 在<head>里添加设备检测脚本，给根元素标记设备类型
2. 用CSS根据标记的类来控制元素显示

代码示例：

<head>
  <script>
    // 自定义移动设备UA检测逻辑，和你提到的规则一致
    function isMobile() {
      const mobileUA = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
      return mobileUA.test(navigator.userAgent);
    }

    // 页面加载前就给<html>添加对应的类
    if (isMobile()) {
      document.documentElement.classList.add('is-mobile');
    } else {
      document.documentElement.classList.add('is-desktop');
    }
  </script>
  <style>
    /* 默认隐藏元素，只有桌面设备才显示 */
    #desktop-only {
      display: none;
    }

    .is-desktop #desktop-only {
      display: block; /* 换成你需要的显示属性，比如inline-block等 */
    }
  </style>
</head>

这个方案的优势：

• 完全避免闪烁：CSS在元素渲染时直接生效，移动设备上元素根本不会被显示出来
• 可控性强：你可以随时调整UA检测的规则，比如新增需要排除的设备
• 不需要依赖jQuery（当然如果你的项目已经在用也没关系，这个脚本是纯JS的）

替代方案2：提前执行jQuery检测（适合已依赖jQuery的场景） #

如果项目里必须用jQuery，那可以把检测代码放在<head>里，配合提前的CSS隐藏，尽量减少闪烁：

<head>
  <script src="jquery.js"></script>
  <script>
    $(function() {
      const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
      if (!isMobile) {
        $("#desktop-only").show();
      }
    });
  </script>
  <style>
    /* 提前默认隐藏，桌面端再通过JS显示 */
    #desktop-only {
      display: none;
    }
  </style>
</head>

不过还是更推荐方案1，因为CSS控制比JS操作DOM更高效，也能彻底解决闪烁问题。

关于UA检测的小提醒 #

UA检测确实不是100%完美（比如用户可以修改UA），但对于区分iPad这类明确的移动设备来说，已经足够可靠——毕竟你的需求就是排除iPad哪怕它屏幕大，UA检测刚好能精准做到这一点。如果用触摸检测的话，会误判带触摸屏幕的桌面设备，反而不符合你的需求。

内容的提问来源于stack exchange，提问作者Félix Paradis