This page is Almost Ready

Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

deviceYDPI

Summary

Retrieves the device’s vertical Dots Per Inch (DPI) value.

Property of css/cssom/screencss/cssom/screen

Syntax

var result = element.deviceYDPI;
element.deviceYDPI = value;

Examples

The following examples use the deviceYDPI property to retrieve the vertical DPI of the screen. The function in this example returns 1 if Internet Explorer is not adjusting the scale of the screen.

<script>
  function fnScaleFactorY() {
    var nScaleFactor = screen.deviceYDPI / screen.logicalYDPI;
    return nScaleFactor;
  }
</script>

This example uses the -ms-zoom property of the BODY element to adjust the scale of the document “manually” if Internet Explorer is not adjusting the scale of the screen and the user’s vertical DPI is higher than normal. This is a simple but imprecise way to make a document look the same on higher resolution screens. You can achieve finer control over the layout of your documents by modifying the properties of individual elements or groups of elements.

<script>
  // change layout on HighDPI screens when IE not scaling
  function fnScaleManually()
  {
    // normal DPI
    var constNorm = 96;

    // scaling is off and DPI higher than normal
    if ((screen.deviceYDPI == screen.logicalYDPI)
      && (screen.deviceYDPI > constNorm))
    {
      document.body.style.zoom =
        constNorm / screen.logicalYDPI;
    }
  }
</script>

Notes

Remarks

On most systems, there is no difference between horizontal and vertical DPI. The deviceYDPI property was introduced in Microsoft Internet Explorer 6. For information about how Internet Explorer 6 and later can adjust the scale of the display on screens with higher-than-normal DPI, see Adjusting Scale for Higher DPI Screens.

Syntax

Standards information

There are no standards that apply here.

See also

Related articles

CSSOM

Related pages

Attributions