如何通过URL参数mobilesize=1实现IMA视频广告移动端尺寸适配

问题排查与修复步骤 #

1. 确认getUrlParam函数有效性 #

这是触发尺寸调整的核心前提，如果函数无法正确读取URL参数，后续逻辑根本不会执行。

• 在浏览器控制台执行console.log(getUrlParam("mobilesize"))，验证当URL包含?mobilesize=1时是否返回"1"。
• 如果函数未实现或存在bug，替换为标准实现：

function getUrlParam(name) {
  const urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(name);
}

• 判断条件建议用严格相等（===），避免类型匹配问题。

2. 完善广告尺寸设置（含比例适配） #

原代码仅修改宽度，高度固定会导致视频变形，同时要确保参数覆盖逻辑正确：

const adsRequest = new google.ima.AdsRequest();
adsRequest.adTagUrl = 'XX'; 

// 初始化默认尺寸
let linearWidth = 640;
let linearHeight = 480;
let nonLinearWidth = 640;
let nonLinearHeight = 240;

// 读取URL参数并调整尺寸
const mobileSizeFlag = getUrlParam("mobilesize");
if (mobileSizeFlag === "1") {
  // 按原比例计算适配高度，避免视频拉伸
  linearWidth = 401;
  linearHeight = Math.round(linearWidth * (480 / 640)); // 4:3比例
  
  nonLinearWidth = 401;
  nonLinearHeight = Math.round(nonLinearWidth * (240 / 640)); // 8:3比例
}

// 赋值给AdsRequest对象
adsRequest.linearAdSlotWidth = linearWidth;
adsRequest.linearAdSlotHeight = linearHeight;
adsRequest.nonLinearAdSlotWidth = nonLinearWidth;
adsRequest.nonLinearAdSlotHeight = nonLinearHeight;

3. 修复广告容器的CSS样式 #

即使IMA参数设置正确，如果容器宽度仍固定为640px，页面依然会出现横向滚动。给广告容器添加响应式样式：

/* 广告容器样式 */
.ima-ad-container {
  max-width: 100%;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

/* 强制视频元素自适应容器 */
.ima-ad-container video {
  width: 100% !important;
  height: auto !important;
}

4. 可选优化：用视口宽度替代固定像素 #

固定401px仍可能不适配部分小屏设备，建议改为基于视口动态计算：

if (mobileSizeFlag === "1") {
  // 取视口宽度的90%，避免内容贴边溢出
  linearWidth = Math.round(window.innerWidth * 0.9);
  linearHeight = Math.round(linearWidth * (480 / 640));
  nonLinearWidth = linearWidth;
  nonLinearHeight = Math.round(nonLinearWidth * (240 / 640));
}

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