移动端跑马灯需用100vw而非100%、white-space: nowrap设于文本元素、overflow: hidden设于定宽容器，并加will-change: transform和transform: translatez(0)启用gpu加速，动画时长须js动态计算scrollwidth。
移动端跑马灯效果不能直接套用 PC 的 width: 100% + translateX(100%) 写法，否则在小屏上会因视口缩放、字体渲染差异、滚动边界错位导致跳帧、卡顿或首尾断裂。核心要解决的是「容器宽度动态适配」和「文本长度不可预知」两个问题。
移动端必须加 white-space: nowrap 和 overflow: hidden
这是所有跑马灯生效的前提，但移动端容易忽略两点：
-
white-space: nowrap必须写在文本元素（如.marquee-content）上，而不是容器上；否则 iOS Safari 仍可能换行 -
overflow: hidden要设在有明确width或max-width的容器上，不能依赖100vw—— 某些 Android 浏览器会把地址栏高度计入vw，造成容器实际宽度忽大忽小 - 建议显式设置容器宽度为
width: calc(100% - 2rem)或固定值（如width: 320px），避免 viewport 缩放干扰
动画起点和终点要用 100vw 而不是 100%
100% 在移动端解析为父容器宽度，而父容器若未设宽或受 flex 影响，计算结果常为 0 或异常；100vw 则始终等于当前视口宽度，更可靠：
@keyframes marquee-mobile {
0% { transform: translateX(100vw); }
100% { transform: translateX(-100vw); }
}
注意：这里用 100vw 是为了覆盖「文本可能比视口宽得多」的场景；若文本很短，可改用 calc(100vw + var(--text-width)) 配合 JS 注入变量，但多数情况下 100vw 已足够平滑。
必须加 will-change: transform 和 transform: translateZ(0)
移动端 GPU 加速不默认开启，尤其低端 Android 机型。不加这两句，动画极易掉帧：
-
will-change: transform提前告知浏览器该元素将频繁变换位置 -
transform: translateZ(0)强制创建独立图层（部分旧版 Chrome/Android WebView 必需） - 两者都加在滚动内容元素上，例如：
.marquee-content { will-change: transform; transform: translateZ(0); } - 别加在容器上——它不移动，加了反而增加合成层开销
速度要按视口宽度动态算，不能写死 10s
写死 animation-duration: 10s 在 iPhone SE（375px 宽）和 iPad Pro（1024px 宽）上滚动感天差地别。推荐用 CSS 自定义属性 + JS 动态设置：
.marquee-content {
animation: marquee-mobile calc(var(--duration, 8s)) linear infinite;
}
然后在 JS 中：
const container = document.querySelector('.marquee-container');
const content = container.querySelector('.marquee-content');
const textWidth = content.scrollWidth;
const duration = Math.max(6, textWidth / 30); // 30px/s 基准速度
content.style.setProperty('--duration', `${duration}s`);
关键点：scrollWidth 在移动端必须等 DOM 渲染完成后再读（可用 requestAnimationFrame 或 DOMContentLoaded 后延迟一帧），否则返回 0。
最易被忽略的是：iOS Safari 对 transform: translateX() 的 sub-pixel 渲染不敏感，如果文本宽度刚好卡在小数像素边界，会出现“一顿一顿”的跳跃感。解决方案只有两个：确保文本内容宽度是整数像素（靠字体大小和 letter-spacing 控制），或改用 requestAnimationFrame + left 定位（牺牲硬件加速换精度）。前者更轻量，后者更可控——选哪个取决于你能否接受轻微性能折损。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
