如何用JavaScript缩放并居中适配1280x720的HbbTV/CeHTML页面

问题背景 #

我有固定为1280x720的HbbTV/CeHTML内容，需要在不同分辨率的设备上适配展示。当前实现的缩放代码仅能完成基础缩放，但存在内容无法居中、竖屏模式下失效的问题，希望用最少代码实现最佳适配，优先兼容WebKit内核浏览器，若无法实现则兼容IE9。

当前实现代码：

document.body.style.transform = 'scale(' + window.innerWidth/1280 + ')';
document.body.style.transformOrigin = 'top left';

解决方案 #

优先适配WebKit内核的方案 #

核心逻辑是计算等比缩放比例（取宽高方向的最小值，保证内容完整显示），再通过translate实现内容居中，同时适配横竖屏场景：

function fitContent() {
  const targetWidth = 1280;
  const targetHeight = 720;
  // 计算宽高方向的缩放比例，取较小值避免内容超出视口
  const scaleX = window.innerWidth / targetWidth;
  const scaleY = window.innerHeight / targetHeight;
  const scale = Math.min(scaleX, scaleY);
  
  // 计算居中所需的偏移量
  const offsetX = (window.innerWidth - targetWidth * scale) / 2;
  const offsetY = (window.innerHeight - targetHeight * scale) / 2;
  
  // 组合平移与缩放，transformOrigin设为左上角保证计算精度
  document.body.style.transform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
  document.body.style.transformOrigin = 'top left';
}

// 初始化执行+监听窗口 resize 事件
fitContent();
window.addEventListener('resize', fitContent);

兼容IE9的降级方案 #

IE9不支持transform的组合写法，需要处理前缀、视口尺寸兼容性和事件绑定方式：

function fitContent() {
  const targetWidth = 1280;
  const targetHeight = 720;
  // 兼容IE9的视口尺寸获取
  const viewportWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
  
  const scaleX = viewportWidth / targetWidth;
  const scaleY = viewportHeight / targetHeight;
  const scale = Math.min(scaleX, scaleY);
  
  const offsetX = (viewportWidth - targetWidth * scale) / 2;
  const offsetY = (viewportHeight - targetHeight * scale) / 2;
  
  // 处理IE9的-ms前缀
  const bodyStyle = document.body.style;
  bodyStyle.transform = bodyStyle.msTransform = `translate(${offsetX}px, ${offsetY}px) scale(${scale})`;
  bodyStyle.transformOrigin = bodyStyle.msTransformOrigin = 'top left';
}

// 初始化执行
fitContent();
// 兼容IE9的resize事件绑定
if (window.addEventListener) {
  window.addEventListener('resize', fitContent);
} else {
  window.attachEvent('onresize', fitContent);
}

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