桌面用的 728x90 横幅在手机上只露出左边 320 像素,右边一截被裁掉,文字只剩半个。乍看像缓存或者权限的锅,追下去往往不是。
@media (max-width: 768px) {
.ad-banner { width: 320px; height: 100px; }
}
追下去是这么回事:广告位只配了一个固定尺寸,没有按屏幕切换。容器又设了 overflow:hidden,超出的部分直接被切掉。
「广告自适应尺寸」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。
能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。
同一份配置存在多处的,先确认改的是被加载的那一份。新版本先放一台机器上跑一天再全量,问题一般在这段时间暴露。
具体做法是,按断点配置多套尺寸,手机用 320x100;能用自适应广告位就别写死宽高;容器不设 overflow:hidden,先让问题暴露出来;在手机和桌面各截一次图对比。
验收就看一点,手机上的广告完整显示,没有内容被裁切。
