As mentioned in my last blog, Nuxeo Drive, our desktop sync app, now offers a new HTML5 UI and embedded WebKit, which provides more reactivity, consistency between operating systems and a nicer look and feel.
Most of the new laptops available these days come with a new higher definition screen like the Retina display. Under Mac OS X, the UI is stretched automatically. However, Windows responds to a high definition screen differently: it will zoom all the UI elements by default to make them readable.
Here is a good example from the new Microsoft Surface. As you can see in this screen capture, the Nuxeo Drive UI is really small compared to the OS menu:
Our goal is to find a way to get the Windows zoom level and apply it to our WebKit views so the user can get the best UI experience. Here’s how you can do it!
Get Windows Zoom Information
I tried to find where the Zoom information was stored in the registry but didn’t have much luck. Then i found a Windows API that helped me get this information:
if AbstractOSIntegration.os_version_below("6.0.6000"):
# API added on Vista
return 1.00
from ctypes import windll
from win32con import LOGPIXELSX
# Enable DPI detection
windll.user32.SetProcessDPIAware()
# Get Desktop DC
hDC = windll.user32.GetDC(None)
dpiX = windll.gdi32.GetDeviceCaps( hDC, LOGPIXELSX)
windll.user32.ReleaseDC(None, hDC)
# Based on https://technet.microsoft.com/en-us/library/dn528846.aspx
return dpiX / 96.0
So now we are able to find the real zoom factor of the computer.
Apply Zoom Factor to WebKit
Now we need to setup the zoom factor on our views (method of the QWebFrame):
self._frame.setZoomFactor(self._zoomFactor)
Finally, we need to size the Window according to this zoom factor. To do that we override the resize method to use this zoom factor:
def resize(self, width, height): super(WebDialog, self).resize(width * self._zoomFactor, height * self._zoomFactor)
And here we are! The UI is now the same size as all the native components.
