Bootstrap 5搭配particles.js的网页移动端无法自适应缩放问题求助

1. 补全/修正viewport元标签 #

Bootstrap 5 移动端适配的前提是正确配置viewport标签，确保页面宽度跟随设备屏幕宽度，禁用默认缩放：

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

如果代码中缺少该标签，移动端会默认按桌面端宽度渲染页面，直接导致字体过大、布局错位。

2. 修正字体适配逻辑 #

• 避免给字体设置固定px单位，优先使用Bootstrap自带的响应式字体类fs-*，或使用动态单位配置字体：

  /* 字体大小随屏幕宽度自动适配，最小1rem，最大2.5rem，中间按3vw动态缩放 */
  .target-text {
    font-size: clamp(1rem, 3vw, 2.5rem);
  }
  

• 文字居中统一使用Bootstrap全局类.text-center，如果仅需要移动端居中，可使用响应式对齐类text-center text-md-start，实现小屏居中、大屏左对齐的效果。

3. 修复布局与particles.js容器适配问题 #

• 栅格系统使用时必须补充小屏默认类，比如需要大屏占6列、小屏占满的容器，要写为col-12 col-lg-6，不能只写col-lg-6，否则小屏会出现宽度计算错误。
• particles.js的容器不要设置固定宽高，改为相对视口单位：

  #particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 0;
  }
  

• 页面上的文字、按钮等内容要设置position: relative和高于particles容器的z-index，避免被粒子层覆盖导致布局错位。

4. 排查固定宽度样式 #

检查所有自定义样式，删除小屏下不必要的固定min-width、width属性，如果需要特殊适配可以使用Bootstrap内置断点做媒体查询调整。

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