Windows forms web browser control zoom level

Question

I'm using a web browser control to display some on-the-fly generated HTML documents in my application.

Problem is, on my machine said documents are displayed kinda zoomed in. On other colleagues' computers, everything looks "normal". It has to be some kind of local setting but I can't find where to change it.

I can CTRL + Scroll wheel to zoom out, but zoom level is not retained. As far as I can see, there's no easy way to set the predefined zoom level programmatically.

It may be a long shot but I fear it has something to do with Internet Explorer (which I never use) and its settings. Changing control type is not a viable option, unfortunately.

Any help would really be appreciated, thank you.

Answer 1

Problem is, on my machine said documents are displayed kinda zoomed in.

Internet Explorer respects to the windows scale settings. As a result the size that you will see on WebBrowser control on a system having scaling 100, is different from the size which you see on WebBrowser control on a system having scaling 150, while both WebBrowser controls set to 100% zoom.

The reason is because of scaling. The scaling factor is same as Windows scaling factor divided by 100 or physicalScreenHeight/logicalScreenHeight .

As far as I can see, there's no easy way to set the predefined zoom level programmatically.

In fact there is. To change the zoom level of Web Browser control, you can get IWebBrowser2 instance from the WebBrowser.ActiveXInstance property and then using its ExecWB method, set set the zoom this way:

int OLECMDID_OPTICAL_ZOOM = 63;
int OLECMDEXECOPT_DONTPROMPTUSER = 2;
dynamic iwb2 = webBrowser1.ActiveXInstance;
object zoom = 200; //The value should be between 10 , 1000
iwb2.ExecWB(OLECMDID_OPTICAL_ZOOM, OLECMDEXECOPT_DONTPROMPTUSER, zoom, zoom);

You can also add reference to Microsoft Internet Controls (SHDocVw.dll) and cast WebBrowser.ActiveXInstance to SHDocVw.WebBrowser and use ExecWB method. But above code does the trick without adding any reference.

Web browser zoom is completely different from CSS3 zoom. But you may want to know about how to set document body zoom: webBrowser1.Document.Body.Style = "zoom:200%";

All above codes should be run after document has been completed.

Answer 2

The problem is with Screen Resolution. Your screen is on less resolution setting whereas your colleagues' screen is set with higher resolution than yours.

Change your screen resolution to same as your colleagues' screen resolution or vice-versa and you should see the issue resolved.

Note: The decision of which resolution is correct depends completely on your client needs and expectations. You might also want to set right expectation from the start to ensure not to disappoint the client later in the stage.

Answer 3

Might it be that your display is scaled? (Assuming Win 10, but older versions must be pretty similar)

desktop, context menu -> display settings -> under Scale and Layout, is yours set to a value higher than 100%?

Answer 4

Its windows 10 issue all HDPI devices goes to 200% zoom level automatically. To get started, right-click any empty space on your desktop and select Display settings towards the bottom of the context menu. Alternatively, you can go to Start > Settings > System > Display. The Settings app in Windows 10 is ready for per-monitor display scaling.

There is no proper fix for it as I have three screens and all has different display hdpi and I get 200% zoom automatically . So 1 screen shows it ok and other 2 are extra zoomed.

window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;

$('#In').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom += step; 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');
    } else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});

$('#Out').on('click',function(){
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6){//Firefox
        var step = 0.02;
        currFFZoom -= step;                 
        $('body').css('MozTransform','scale(' + currFFZoom + ')');

    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
});};


<input type="button" id="Out" alt="Zoom Out"/>
<input type="button" id="In" alt="Zoom In"/>