移动端 CLS 的三个特有来源，桌面测不出来

2026 年 5 月我们遇到一个站，桌面 CLS 0.02，移动端 0.21。图片宽高、第三方组件都查过了，没问题。最后发现三个偏移来源只在手机上出现，桌面版永远看不到。

第一处：地址栏收起和展开

移动浏览器滚动时，地址栏会收起，视口高度变大，页面重新布局。如果页面里有依赖视口高度的元素，就会跳一下。

最典型的是用 100vh 设定的全屏区块。地址栏一收，100vh 变大，里面的内容跟着重排。

改法是换成 svh 或 dvh 单位，让高度跟着实际视口走。固定底部的按钮也要检查，别用绝对定位加百分比高度。

第二处：输入法和键盘弹出

用户在表单页点输入框，键盘弹出，视口高度瞬间减少一半。底部固定的元素被顶上去，或者页面滚动位置变化，都会记一次偏移。

这个问题在注册页、留资页特别常见，而这些页面恰恰是转化最关键的页面。

改法是尽量不用 fixed 定位的底部元素，或者用 visualViewport 接口监听键盘状态，主动调整布局。

还有一个细节：输入框获得焦点时页面自动滚动，这个滚动不算 CLS，但如果同时触发了元素重排，就会算。

第三处：折叠菜单和横向标签

移动端的导航是折叠的。用户点开菜单，菜单把下面的内容推下去，这是一次明显的偏移。

横向滚动的标签栏也有类似问题：切换标签时内容区高度变化，下面的内容跟着跳。

改法是把折叠面板做成浮层，不占文档流；或者给内容区固定最小高度，变化范围控制在几十像素内。

为什么桌面测不出来

桌面浏览器没有地址栏收起，没有软键盘，视口高度固定，所以这三类问题在桌面上不会触发。

DevTools 的设备模拟虽然能模拟移动端视口，但它不会模拟地址栏和键盘的真实行为，滚动起来视口尺寸是固定的。

所以移动端 CLS 必须上真机测。模拟器只能看个大概。

真机怎么测

用安卓手机连电脑，打开 Chrome 的远程调试，在电脑上看 Performance 面板录屏。

录的时候做三个动作：上下滚动、点开菜单、在表单里点输入框。每个动作之后看有没有 Layout Shift 标记。

录屏比数据有用，因为你能看到具体是哪个元素在动、动了多少。

再看 CrUX 里按设备分组的数据。桌面合格、移动端超标，就说明问题出在这三类场景里。

一个建议

移动端的 CLS 单独设一条线，不和桌面共用。我们给客户的标准是移动端 0.1 以内、桌面 0.05 以内。

因为移动端的偏移对用户影响更大。屏幕小，一次偏移可能把整个按钮挪出视野，用户点不到，直接流失。

这类问题修起来都不难，难的是发现。桌面数据好看的时候，很少有人会想到用真机再测一遍。