Azure DevOps自定义build-results-tab浏览器调整大小适配失效问题

1. 修复HTML基础样式 #

你当前缺少html、body标签的宽高重置，补上后可以避免内部容器尺寸计算偏差：

<!-- reportViewerTab.html 修正后代码 -->
<!DOCTYPE html>
<html lang="en" style="width: 100%; height: 100%; margin: 0; padding: 0;">
  <body style="width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden;">
    <div id="report-viewer-container" style="padding: 0; position: absolute; top: 0; right: 0; bottom: 0; left: 0"></div>
    <script type="text/javascript" src="main.js" charset="utf-8"></script>
  </body>
</html>

2. 调整SDK调用与resize逻辑 #

你之前的代码缺少SDK就绪等待，且resize逻辑没有处理notifyLoadSucceeded之后的宽度计算规则：

import * as SDK from "azure-devops-extension-sdk";
import * as ReactDOM from "react-dom";
import * as React from "react";

export class BuildResultsTab extends React.Component {
    private unmount?: () => void;

    public async componentDidMount() {
        // 初始化SDK
        await SDK.init({applyTheme: true});
        // 必须等待SDK完全就绪后再执行后续操作
        await SDK.ready();
        // 初始尺寸适配
        SDK.resize();
        // 通知加载完成
        SDK.notifyLoadSucceeded();

        // 添加窗口resize监听，加防抖避免频繁触发
        let resizeTimer: NodeJS.Timeout | null = null;
        const handleResize = () => {
            if (resizeTimer) clearTimeout(resizeTimer);
            resizeTimer = setTimeout(() => {
                const rootContainer = document.getElementById("report-viewer-container");
                if (rootContainer) {
                    // 临时设置容器宽度为当前视口宽度，触发SDK重新计算尺寸
                    rootContainer.style.width = `${window.innerWidth}px`;
                }
                SDK.resize();
                // 恢复容器自适应设置
                if (rootContainer) {
                    rootContainer.style.width = "100%";
                }
            }, 100);
        };
        window.addEventListener("resize", handleResize);
        this.unmount = () => window.removeEventListener("resize", handleResize);
    }

    public componentWillUnmount() {
        this.unmount?.();
    }
} 

ReactDOM.render(<BuildResultsTab />, document.getElementById("report-viewer-container"));

3. 修正扩展清单配置 #

删除无效配置，避免干扰加载逻辑：

• 移除contributions[0].properties.dynamic: true：该属性仅适用于动态菜单项类贡献点，对构建结果标签页无意义
• 移除之前添加的width: "100%"配置，该属性对标签类贡献点不生效

4. 可选：升级SDK版本 #

你当前使用的azure-devops-extension-sdk v2.0.11存在已知的resize宽度计算缺陷，升级到v2.1.7及以上版本可以直接修复该问题，无需额外处理临时宽度设置逻辑。

原理说明 #

Azure DevOps的扩展容器iframe会在SDK.notifyLoadSucceeded()调用后默认固定宽度为当前值，后续SDK.resize()默认仅计算调整高度，不会主动更新宽度。上述方案通过临时修改内部容器宽度触发SDK重新计算尺寸，通知主框架更新iframe的宽度属性，实现窗口resize时的自适应效果。

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