particles.js生成的canvas在移动端宽度溢出屏幕问题咨询

动态生成的canvas不需要修改插件源码，按以下步骤操作即可解决问题，无需写死90%宽度导致屏幕留边：

• 补全移动端视口基础配置
  将下述meta标签放入页面<head>标签靠前位置，保证移动端尺寸计算基准正确：

  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  

• 编写CSS强制覆盖canvas样式
  动态生成的元素可以通过CSS选择器匹配后覆盖样式，优先级高于内联属性即可生效：

  /* 全局兜底，禁止横向溢出 */
  html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }
  /* particles容器样式 */
  #particles-js {
    width: 100%;
    height: 100vh; /* 按实际业务需求调整高度，避免写固定像素值 */
    position: relative;
    overflow: hidden;
  }
  /* 覆盖canvas默认样式 */
  #particles-js canvas {
    display: block; /* 消除行内元素默认基线留白，这是侧边出现细白边的核心原因之一 */
    width: 100% !important;
    height: 100% !important;
    max-width: 100%;
  }
  

  调试时设置90%宽度可临时修复，本质是靠缩减宽度避开两个误差：一是canvas默认行内属性产生的基线间隙，二是插件初始化时父容器未渲染完成，宽度计算包含了滚动条占位。上述样式从根源解决问题，100%宽度可适配所有屏幕尺寸，不会留多余白边。

  问题现象（右侧细白边）：
  

  预期正常显示效果：
  

• 增加重绘逻辑解决初始化时机问题
  若添加样式后仍偶发尺寸错位，在现有particles初始化代码后添加下述JS，主动触发插件尺寸重算：

  // 监听窗口变化自动重绘
  window.addEventListener('resize', () => {
    if (window.pJSDom?.[0]?.pJS) {
      window.pJSDom[0].pJS.fn.resize()
    }
  })
  // 页面加载完成后主动重算一次，修正初始化尺寸误差
  window.addEventListener('load', () => {
    setTimeout(() => {
      if (window.pJSDom?.[0]?.pJS) {
        window.pJSDom[0].pJS.fn.resize()
      }
    }, 100)
  })
  

注意：当前配置中开启了retina_detect: true，该配置会在高清屏上放大canvas渲染像素保证清晰度，部分版本particles.js开启该配置时不会同步修正canvas的CSS尺寸，上述强制覆盖样式可兼容该配置，无需关闭影响显示效果。

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