High Resolution Screen and WebKit: Use Zoom Factor for a Great UI Experience
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:
API added on Vista
from ctypes import windll
from win32con import LOGPIXELSX
Enable DPI detection
Get Desktop DC
hDC = windll.user32.GetDC(None)
dpiX = windll.gdi32.GetDeviceCaps( hDC, LOGPIXELSX)
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):
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.
Category: Product & Development