Angular实现类Chrome DevTools移动端仿真预览功能求助

一、纯CSS+Angular逻辑方案（推荐，无依赖） #

你的核心问题是之前的缩放逻辑方向错误：应该保持预览内容的宽高为用户指定的目标分辨率，通过transform: scale()将其缩放到预览容器的可用空间内，而非修改内容本身的宽高。这样内部组件会完全按照目标分辨率渲染，视觉上适配容器，和Chrome DevTools的仿真逻辑一致。

修正后的代码实现： #

1. TypeScript逻辑：

// 用户配置的目标分辨率
terminalWidth = 4000;
terminalHeight = 2000;
scaleValue = 1;
rendererStyles: Record<string, string> = {};

ngAfterViewInit() {
  this.calculateScale();
  // 监听窗口/弹窗大小变化，实时更新缩放比例
  window.addEventListener('resize', () => this.calculateScale());
}

calculateScale() {
  const previewContainer = document.getElementById('kioskPreview');
  if (!previewContainer) return;

  const containerWidth = previewContainer.clientWidth;
  const containerHeight = previewContainer.clientHeight;

  // 计算宽高方向的缩放比例，取较小值保证内容完整显示
  const scaleX = containerWidth / this.terminalWidth;
  const scaleY = containerHeight / this.terminalHeight;
  this.scaleValue = Math.min(scaleX, scaleY);

  // 设置渲染容器样式：固定目标分辨率，再缩放适配容器
  this.rendererStyles = {
    width: `${this.terminalWidth}px`,
    height: `${this.terminalHeight}px`,
    transform: `scale(${this.scaleValue})`,
    transformOrigin: 'top left', // 确保缩放从左上角对齐，无偏移
  };
}

2. HTML模板：

<!-- 预览容器：设置可用空间，隐藏溢出内容 -->
<div id="kioskPreview" style="width: 100%; height: 80vh; overflow: hidden; position: relative;">
  <!-- 渲染容器：按目标分辨率渲染，再缩放适配 -->
  <div id="kioskPreviewRenderer" [style]="rendererStyles">
    <my-rendering-component></my-rendering-component>
    <my-rendering-component></my-rendering-component>
  </div>
</div>

关键细节： #

• overflow: hidden：避免内容超出容器时出现滚动条或截断问题
• transform-origin: top left：保证缩放时内容左上角与容器对齐，不会产生偏移
• 监听resize事件：若弹窗大小可能变化（如用户拖动调整），实时更新缩放比例

二、Angular库方案 #

如果不想手动实现逻辑，可选择轻量第三方库或封装自定义指令：

• 自定义缩放指令：将上述缩放逻辑封装为Angular指令，接收目标宽高作为输入参数，可在多个组件中复用
• angular-scale：专门用于Angular组件的动态缩放控制，支持适配容器尺寸

三、优化技巧 #

• 若缩放后内容模糊：给渲染容器添加transform: translateZ(0)开启硬件加速，或针对像素类内容添加image-rendering: crisp-edges
• 全屏弹窗场景：将kioskPreview的宽高设为100vw和100vh，确保占满整个弹窗空间

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