High Resolution Screen and WebKit: Use Zoom Factor for a Great UI Experience


Tue 03 November 2015 By Rémi Cattiau

Windows High Res Issue-Nuxeo Drive Hard to Read-2As mentioned in my last blog, Nuxeo Drive 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:

Windows Surface - No Zoom

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.

Windows Surface - Zoomed


Category: Product & Development
Tagged: How to, Nuxeo Drive, Nuxeo Platform 7.x, WebKit