webview/webview

HDPI Support?

ajusa opened this issue ยท 17 comments

ajusa commented

Hi,
I really love this library, and it is super useful to me. I was wondering about HDPI support, at least on windows. On my machine, the opened web browser looks very pixelated. IE10 looks just fine, and supports high definition fonts, but the window that this opens up just looks blocky.

Is there any way I can make the webview work well with HDPI displays?

I'm also interested in this...

Hm, I don't think that's the solution. In my normal IE11 on Win8.1, the same site looks HDPI but if I open it with webview, it looks low-res.. It must be some setting for the MSHTML engine.

ajusa commented

Yeah, I noticed that too

Probably related to application DPI awareness:

EDIT:
Verified with Visual Studio 2013 Community
Project->Properties->Configuration Properties->Manifest Tool->Input and Output->DPI Awareness
change from None to High DPI Aware.
Per Monitor High DPI Aware needs handling of additional messages, so initially it would be harder, but it would react faster on DPI setting change.
Unfortunately High DPI Aware on Windows 10 needs log off and log in after change to work correctly.

Or edit manifest manually:

<?xml version='1.0' encoding='UTF-8' standalone='yes'?>
<assembly xmlns='urn:schemas-microsoft-com:asm.v1' manifestVersion='1.0'>
    <dependency>
        <dependentAssembly>
            <assemblyIdentity
                type="win32"
                name="Microsoft.Windows.Common-Controls"
                version="6.0.0.0"
                processorArchitecture="*"
                publicKeyToken="6595b64144ccf1df"
                language="*"
            />
        </dependentAssembly>
    </dependency>
    <asmv3:application xmlns:asmv3="urn:schemas-microsoft-com:asm.v3">
    	<asmv3:windowsSettings xmlns="http://schemas.microsoft.com/SMI/2005/WindowsSettings">
            <dpiAware>true</dpiAware>
    	</asmv3:windowsSettings>
    </asmv3:application>
</assembly>

Or early in WinMain call

SetProcessDpiAwareness( PROCESS_SYSTEM_DPI_AWARE );

Or

SetProcessDpiAwareness( PROCESS_PER_MONITOR_DPI_AWARE );

Right click the exe file -> properties -> compatibility, there's an option "Override high DPI scaling behavior". Check it.
This is equal to write register "/Software/Microsoft/Windows NT/CurrentVersion/AppCompatFlags/Layers" KEY:path/to/exe VALUE:"~HIGHDPIAWARE"

Use the following code to adjust width and height automatically

  HDC hDC = GetDC(NULL);
  w->width = GetDeviceCaps(hDC, 88)*w->width/96.0;
  w->height = GetDeviceCaps(hDC, 90)*w->height/96.0;
  ReleaseDC(NULL, hDC);

and this works fine for most examples.

I have a pull request which fixes this.

Woah that was a quick reply. :) I took a drink of coffee, looked back over and here it is. Nice thank you for the great project

Did this PR ever get merged?

When I execute binary files directly, the application is not blurred. But when the application is packaged and run, the window becomes blurred. I use macOS.

https://github.com/mantou132/evernote-webview
screen shot 2019-02-19 at 2 24 01 am
// fixed: NSHighResolutionCapable

I have a fix for windows that extends the minimal-go example.

package main

import (
	"syscall"
	"github.com/zserge/webview"
)

func scale() {
	modshcore := syscall.NewLazyDLL("Shcore.dll")
	shc := modshcore.NewProc("SetProcessDpiAwareness")
	shc.Call(uintptr(1))
}

func main() {
	// Open wikipedia in a 800x600 resizable window
	scale()
	webview.Open("Minimal webview example",
		"https://en.m.wikipedia.org/wiki/Main_Page", 800, 600, true)
}

No idea about mac so sorry about that but I hope this helps.

Was there a regression of sorts? I think the pull request was for old version of this library that used the msedge HTML, and needs to be fixed for webview2 Edge implementation too.

I'm testing the webview_rust in Windows 10, the windows are blurry.


For webview_rust one can fix it like this:

Cargo.toml

[target.'cfg(windows)'.dependencies]
winapi = { version = "0.3.9", features = ["shellscalingapi"] }

main.rs

fn main() {
    #[cfg(target_os = "windows")]
    unsafe {
        winapi::um::shellscalingapi::SetProcessDpiAwareness(2);
    }

    // Rest of the application ...

This library also doesn't support display scaling from KDE, when the display is scaled, the GTK+ webkit doesn't scale properly and elements are too small.

So recently, I started using this library again and I've found a workaround for Linux. โœจ

Use winit to get the scale factor and set the scale factor as the zoom level on the webview instead.

First, get the scale factor

    let scale_factor = {
        use winit::{event_loop::EventLoop, window::WindowBuilder};

        let event_loop = EventLoop::new();
        let window = WindowBuilder::new()
            .with_maximized(false)
            .with_visible(false)
            .build(&event_loop)?;

        let scale_factor = window.scale_factor();
        println!("Scale factor: {}", scale_factor);

        drop(window);

        scale_factor
    };

Then, instantiate the webview and call set_zoom_level on the webview.

webview.set_zoom_level(scale_factor);

Closing as stale. The current situation on Windows is that the library enables DPI awareness.