Adjusting Scale for Higher DPI Screens

To improve the browsing experience for users with higher-resolution systems, Microsoft Internet Explorer 6 and later can automatically adjust the scale of the display.

The following topics are discussed in this document.

  • Pixels, Dots, and Resolution
  • Problems with Higher DPI
  • Scaling is the Solution
    • ActiveX Controls and Binary Behaviors
  • How to Activate Scaling
    • Set the DPI
    • Add the UseHR Registry Entry
  • Related topics

Pixels, Dots, and Resolution

The terms pixel and dot are used interchangeably. Pixel is short for picture element (pix-el). It is a relative length unit that represents the smallest amount of information displayed on the screen as a single dot. Screen resolution is expressed in dots per inch (dpi), which is the number of dots—or pixels—the screen displays per linear inch.

The normal resolution on most systems is 96 dpi. Until recently, most computer hardware was not capable of producing higher resolution, but this is changing. Several hardware manufacturers, particularly manufacturers of laptop systems, are building systems capable of producing higher resolution. These systems will be available before the end of the year 2001.

Images become crisper and text more legible as dpi increases. Because computer screens have sharper pixels and support gray scale, the text on a 200 dpi monitor is as clear as the printout from a 600 dpi laser printer.

Note  Screen resolution can also be expressed as the total number of pixels displayed horizontally and vertically—such as 640 by 480, 800 by 600, and 1024 by 768. For example, 640 by 480 means there are 640 pixels displayed horizontally and 480 pixels displayed vertically.

 

Problems with Higher DPI

A user interface that was designed to look good on a 96 dpi display may look unsightly at higher resolutions. Text and graphics that are small at 96 dpi may appear much smaller at 200 dpi. When the number of pixels per inch increases, the size of the individual pixels decreases. Doubling the density of the pixels may halve the size of the text so that the text is no longer readable. Web pages that specify pixel sizes for containers and text appear half their size, and the layout around them is adjusted accordingly.

Scaling is the Solution

Internet Explorer 6 and later solves these problems by proportionally adjusting the scale on displays with higher resolution.

When scaling is activated on a 192 dpi system, for example, an HTML element that has a specified height and width of 250 pixels has a scaled height and width of approximately 500 pixels.

192 DPI / 96 DPI * 250 pixels = 500 pixels

ActiveX Controls and Binary Behaviors

Scaling is not a perfect solution. Embedded Microsoft ActiveX controls, binary behaviors, and other elements that use Windows Windows Graphics Device Interface (GDI) calls scale poorly or not at all. The GDI does not perform automatic scaling based on the density of the display.

Web page authors should avoid using small graphics and images that don't scale well, such as images that contain sharp rendered text, or use different graphics when Windows Internet Explorer is adjusting the scale of the display.

The following script uses the deviceXDPI and logicalXDPI properties of the screen object to calculate the horizontal scale factor that Internet Explorer is applying. The deviceXDPI property retrieves the actual dpi of the system's screen, and the logicalXDPI property retrieves the normal dpi of the system's screen. The function in this example returns 1 if Internet Explorer is not adjusting the scale of the screen. When deviceXDPI and logicalXDPI are equal, Internet Explorer is not adjusting the scale of the screen.

Note  You can use the deviceYDPI and logicalYDPI properties of the screen object to calculate the vertical scale factor that Internet Explorer is applying. On most systems, however, there is no difference between horizontal and vertical dpi.

 

<script>
  function fnScaleFactorX() {
    var nScaleFactor = screen.deviceXDPI / screen.logicalXDPI;
    return nScaleFactor;
  }
</script>

How to Activate Scaling

Internet Explorer 6 and later automatically adjusts the scale on higher resolution systems when the dpi setting is higher than 96 dpi and the "UseHR" registry value is added to the registry. These are usually done by the manufacturers of higher resolution systems.

Set the DPI

These are the steps for changing the dpi setting on your system.

  1. Right-click the Windows desktop to display the context menu.
  2. Click Properties on the context menu to display the Display Properties dialog.
  3. Click the Settings tab on the Display Properties dialog to display the Settings tab.
  4. Click the Advanced button on the Settings tab to display the monitor properties dialog.
  5. Select a dpi setting in the Display frame of the monitor properties dialog to change the dpi setting.
  6. Restart your system to allow the changes to take effect.

Add the UseHR Registry Entry

The UseHR value is added to the Main key under "Internet Explorer" as follows:

HKEY_CURRENT_USER
   Software
      Microsoft
         Internet Explorer
            Main
               UseHR = dword:00000001

How to Write High-DPI Applications