本文介绍如何根据URL参数（如 mobilesize=1）动态调整Google IMA SDK中视频广告的播放槽位尺寸，确保广告在手机屏幕上自适应显示，避免因固定640px宽度导致页面横向溢出和滚动。
本文介绍如何根据url参数（如 `mobilesize=1`）动态调整google ima sdk中视频广告的播放槽位尺寸，确保广告在手机屏幕上自适应显示，避免因固定640px宽度导致页面横向溢出和滚动。
在使用 Google IMA SDK 集成视频广告时，linearAdSlotWidth 和 linearAdSlotHeight（以及非线性广告的对应属性）不仅影响广告请求的创意选择，更直接决定广告容器的渲染尺寸。若仅修改宽度而忽略高度，将破坏原始宽高比（如常见的 4:3 或 16:9），导致画面拉伸、裁剪或布局错乱，甚至无法正确适配移动端视口。
正确的做法是同步、按比例缩放宽高。例如，桌面端默认使用 640×480（4:3），当检测到 mobilesize=1 参数时，应将宽度设为 401px，并按相同比例计算高度：
401 × (480 / 640) ≈ 301（四舍五入取整）。同理，非线性广告槽位（原 640×240，即 8:3）也需等比缩放：401 × (240 / 640) ≈ 150.375 → 151。
以下是推荐的实现方式（含健壮性增强）：
function getUrlParam(name) {
const urlParams = new URLSearchParams(window.location.search);
return urlParams.get(name) || '';
}
const adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'YOUR_AD_TAG_URL';
// 定义基础尺寸（桌面端）
let linearWidth = 640;
let linearHeight = 480;
let nonLinearWidth = 640;
let nonLinearHeight = 240;
// 根据 mobilesize 参数动态调整
if (getUrlParam('mobilesize') === '1') {
// 保持 4:3 比例（640:480 → 401:301）
linearWidth = 401;
linearHeight = 301;
// 保持 8:3 比例（640:240 → 401:151）
nonLinearWidth = 401;
nonLinearHeight = 151;
}
// 应用到 AdsRequest 实例
adsRequest.linearAdSlotWidth = linearWidth;
adsRequest.linearAdSlotHeight = linearHeight;
adsRequest.nonLinearAdSlotWidth = nonLinearWidth;
adsRequest.nonLinearAdSlotHeight = nonLinearHeight;⚠️ 注意事项：
- 必须在创建 AdsRequest 后、调用 requestAds() 前设置尺寸属性，否则无效；
- IMA SDK 不会自动缩放广告内容本身，它仅依据槽位尺寸向广告服务器请求匹配尺寸的创意（如 VAST 中 <MediaFile width="401" height="301">），因此服务端需提供对应尺寸的广告素材；
- 建议配合 CSS 媒体查询或 max-width: 100%; height: auto; 确保 <video> 或广告容器在 DOM 层面不突破视口；
- 生产环境建议增加参数校验（如 !isNaN()）和默认回退逻辑，避免异常参数导致尺寸为 0 或 NaN。
通过上述方式，即可精准控制广告请求尺寸，从根本上解决移动端因广告过宽引发的横向滚动问题，提升用户体验与广告填充率。
