在 WebBrowser 控件中适合 html 页面宽度

Question

I have a lot of local html pages which I open in a WebBrowser control in my app.
I would like the page to initially open to fit the width of the control and ideally to change its width to fit the control after a user resize.
As there are a lot of pages, I would prefer a c#, js or css solution which doesn't require modifying the html files.
I searched high and low, tried tens of solutions (many of them here on SO) but nothing seems to work.
Win 7, IE 11, VS 2022
Thanks in advance

Answer 1

Since you're using Win7 and IE11, I have a hunch you're using WinForms. The DOM can be accessed through the WebBrowser control's Document property where we can add the CSS. Put this in your WebBrowser.DocumentCompleted event handler:

webBrowser1.Document.Body.Style += ";width:100%;";

The Style property is just like an HTML style= attribute, that is, a string of CSS styles separated by semicolons. The appended string starts with a semicolon in case the existing styles don't end with one.

For WPF, first see Accessing DOM from WebBrowser . Then you can put this in your WebBrowser.LoadCompleted event handler:

var document = webBrowser1.Document as mshtml.HTMLDocument;
document.body.style.width = '100%';

Answer 2

There are a few ways you can achieve this without modifying the HTML pages themselves.

Using JavaScript: You can add a JavaScript function to the WebBrowser control's DocumentCompleted event to resize the HTML page to fit the width of the control. Here's an example of how you can do this:

    private void webBrowser1_DocumentCompleted(object sender, WebBrowserDocumentCompletedEventArgs e)
{
    webBrowser1.Document.Body.Style = "zoom:100%";
}

The above code sets the zoom level of the body of the HTML page to 100%, which will make it fit the width of the control. You can also use the "width" and "height" properties of the body style to set the width and height of the page to the size of the control.

Using Css: You can use css to change the width of the html pages in your WebBrowser control. You can create a css file and include it in your html file.

    body {
  width: 100%;
}

This will set the width of the body to 100% of the parent container, which in this case is the WebBrowser control.

Using C#: You can use the WebBrowser control's Resize event to change the size of the HTML page to fit the control. Here's an example of how you can do this:

    private void webBrowser1_Resize(object sender, EventArgs e)
{
    webBrowser1.Width = this.Width;
    webBrowser1.Height = this.Height;
}

This code sets the width and height of the WebBrowser control to the width and height of the parent form/container.

It's worth noting that solution 1 and 3 may cause issues with the layout of the HTML page, as the page may not be designed to automatically adjust its size. Solution 2 is the best approach if you want to change the size of the HTML pages in a cleaner way, as it's less prone to errors.

It's also worth noting that you can combine the above solutions for better results. You can use solution 2 to set the width of the HTML pages to 100% and then use solution 3 to adjust the size of the WebBrowser control to fit the parent form/container.

I hope this helps. Let me know if you have any further questions.