如何让WebBrowser控件中本地HTML页面适配宽度且无需修改原文件？

1. 强制WebBrowser使用IE11内核（关键前提） #

Win7下WebBrowser默认启用IE7兼容模式，多数现代JS/CSS特性无法生效，必须先通过注册表设置浏览器仿真模式。在程序启动时添加以下代码：

using Microsoft.Win32;
using System;

static void Main()
{
    string appName = System.Diagnostics.Process.GetCurrentProcess().ProcessName + ".exe";
    RegistryKey key = Registry.CurrentUser.OpenSubKey(@"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION", true);
    key ??= Registry.CurrentUser.CreateSubKey(@"Software\Microsoft\Internet Explorer\Main\FeatureControl\FEATURE_BROWSER_EMULATION");
    // 11001代表强制使用IE11标准模式
    key.SetValue(appName, 11001, RegistryValueKind.DWord);
    key.Close();

    Application.EnableVisualStyles();
    Application.SetCompatibleTextRenderingDefault(false);
    Application.Run(new YourMainForm());
}

2. WebBrowser控件基础配置 #

在窗体代码或设计器中设置以下属性：

• ScriptErrorsSuppressed = true：屏蔽JS错误弹窗
• WebBrowserShortcutsEnabled = false：避免快捷键干扰（可选）
• AllowWebBrowserDrop = false：禁止拖拽加载（可选）

3. 动态注入适配代码（DocumentCompleted事件） #

在WebBrowser的DocumentCompleted事件中注入CSS和JS，实现初始宽度适配：

using mshtml;

private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    WebBrowser browser = sender as WebBrowser;
    if (browser == null || browser.Document == null) return;

    // 注入全局CSS，强制所有元素适配容器宽度
    string css = @"
        html, body {
            width: 100% !important;
            margin: 0 !important;
            padding: 0 !important;
            overflow-x: hidden !important;
        }
        img, table, div, p, h1~h6 {
            max-width: 100% !important;
            height: auto !important;
            word-wrap: break-word !important;
        }
    ";
    IHTMLStyleSheet styleSheet = (browser.Document.DomDocument as IHTMLDocument2).createStyleSheet("", 0);
    styleSheet.cssText = css;

    // 注入JS适配函数，处理固定宽度元素
    string js = @"
        function fitToBrowserWidth() {
            document.body.style.width = window.innerWidth + 'px';
            var fixedElements = document.querySelectorAll('[style*=""width:""]');
            for(let i=0; i<fixedElements.length; i++){
                let elem = fixedElements[i];
                let widthVal = parseInt(elem.style.width);
                if(!isNaN(widthVal) && widthVal > window.innerWidth){
                    elem.style.width = '100%';
                }
            }
        }
        fitToBrowserWidth();
    ";
    browser.Document.InvokeScript("execScript", new object[] { js, "JavaScript" });
}

需提前添加对Microsoft.mshtml的COM引用，并引入using mshtml;命名空间。

4. 控件 resize 时自动适配 #

在WebBrowser的Resize事件中调用适配函数，实现实时宽度调整：

private void webBrowser1_Resize(object sender, EventArgs e)
{
    WebBrowser browser = sender as WebBrowser;
    if (browser != null && browser.Document != null && !browser.IsBusy)
    {
        browser.Document.InvokeScript("fitToBrowserWidth");
    }
}

额外注意事项 #

• 若页面包含iframe，需在JS中遍历iframe并调用fitToBrowserWidth函数处理内部页面
• 若仍存在横向滚动条，可在CSS中添加* { min-width: auto !important; }覆盖元素的最小宽度设置

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