Dani's Braindump

Chrome for high-dpi devices

December 22, 2013 | 2 Minute Read

J ust bought a new laptop with a screen resolution of 1920×1080 (Full-HD). Unfortunately, Chrome is currently not optimized for screen resolutions like this on comparatively small screens like mine (14″), meaning that the UI Components (tabs, navigation buttons, bookmark bar items, …) are tiny and barely readable. Similar issues came up when Apple launched their MacBook series with Retina display: Some apps were simply not optimzied for this pixel density.

Now that more and more laptops are already shipped with screens providing Full-HD resolution even at very small screens, Windows users begin noticing the same effects.

To fix the issue in my specific case for Chrome I had the following choices:

  1. Change the overall DPI-scaling for Windows (see here on how it’s done). Since I have the laptop in a docking station with external displays at home, this was not an option for me, because I would have to readjust the settings everytime I switch from working on the laptop display to the external display and vice versa.
  2. Change the screen resolution. Since this would result in everything getting bigger (not just the Chrome UI components), this was not an option. After all I want to make use of the high resolution capabilities of my laptop screen and Windows itself looked just fine.
  3. Enable Hight-DPI support for chrome. To do thiss folow these steps:
    1. Enter chrome://flags in your URL bar
    2. Search for “high-dpi-suppor” to jump to the right setting quickly
    3. Set HiDPI-Support to “Enabled”

  4. Change the DPI-Scaling setting just for chrome and adjusting the content display configuration. To do this follow these steps:
    1. Find the Chrome executable in your programs folder
    2. Right click and go to the “Compatibility” tab, checking the checkbox saying “Disable display scaling on high DPI setting”
    3. Open Chrome and type “chrome://flags”
    4. Find (CTRL + F) “#touch-optimized-ui”, make sure that it is set to “Enabled”. This will result in the browser being displayed in a manner optimized for touch devices like tablets.
    5. If you want you can adjust the zoom factor used for displaying web content generally by going to “Settings” > “Advanced Settings” > “Page Zoom”. This will result in all web content being displayed larger.

Unfortunately, even though the last solution proved to be the best for me, it is still only a workaround. The downside is that even if I can get the web content to being displayed reasonably on my laptop screen, it does not look good on external displays. I have a touch-optimized Chrome even when working on the external display. This results in the tab-bar, navigation bar and bookmark bar being much thicker than normal and hence looking unnatural big and taking away space to show HTML content.

It is desirable that Google adjusts its famous browser to support high-res screens ASAP. After all, Google has a notion of being innovative and alway on the bleeding edge with its browser 😉