In order to access this site you need to enable JavaScript!

You are here: Reference > JavaScript > client-side > browser > properties > deviceYDPI (screen)

deviceYDPI property (screen)

Browser support:

Returns the current number of dots per inch (DPI) of the document's viewport along the vertical (y) axis.

Use this property to determine if the user has a higher-than-usual pixel density display, which shows fixed-size items on the screen uncomfortably small. In that case, some elements on the page may be rendered too small.

The current number of dots per inch depends on the magnification of the web page. The user has the ability to zoom in or out a web page (CTRL and +, CTRL and -). Zooming affects the value of the deviceXDPI and deviceYDPI properties.

Since the logicalXDPI and logicalYDPI properties retrieve the number of dots per inch of the document's viewport at normal zoom level, the current magnification scale of the web page can be calculated with the help of the deviceXDPI, logicalXDPI, deviceYDPI and logicalYDPI properties.

Although the deviceXDPI and deviceYDPI properties are also supported in Internet Explorer earlier than version 8, they always retrieve the number of dots per inch of the document's viewport at normal zoom level like the logicalXDPI and logicalYDPI properties. Unfortunately, the functionality of several properties and methods (such as the clientX and clientY properties of the event object, the clientWidth and clientHeight properties of the html element, the getBoundingClientRect and getClientRects methods) depends on the current zoom level of the web page in Internet Explorer before version 8.
As a result, you may need the current zoom level in several cases. See the Example 2 below, it implements a possible solution for that problem.

Note that the magnification scale of an HTML element can also be modified with the zoom style property, but that does not affect the deviceXDPI and deviceYDPI properties.

Syntax:

object.deviceYDPI;

You can find the related objects in the Supported by objects section below.

This property is read-only.

Possible values:

Integer that represents the vertical DPI. Typically 96 dots per inch at normal zoom level.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the deviceYDPI property:

<head>
    <script type="text/javascript">
        function GetDPI () {
            var message = "";
            if ('deviceXDPI' in screen) {
                message += "The system horizontal DPI: " + screen.systemXDPI + "<br />";
                message += "The system vertical DPI: " + screen.systemYDPI + "<br />";
                message += "The current horizontal DPI: " + screen.deviceXDPI + "<br />";
                message += "The current vertical DPI: " + screen.deviceYDPI + "<br />";
                message += "The logical horizontal DPI: " + screen.logicalXDPI + "<br />";
                message += "The logical vertical DPI: " + screen.logicalYDPI + "<br />";
            }
            else {  // Firefox, Opera, Google Chrome and Safari
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetDPI ()">
    <div id="info" style="background-color:#e0b0b0; width:250px"></div>
    Use the CTRL and + keys to zoom in and the CTRL and - keys to zoom out.
    Refresh the page (F5) after zooming.
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to get the current zoom level in Internet Explorer:

<head>
    <script type="text/javascript">
            // always return 1, except at non-default zoom levels in IE before version 8
        function GetZoomLevelIE7 () {
            var level = 100;
            if (document.body.getBoundingClientRect) {
                    // rect is only in physical pixel size in IE before version 8 
                var rect = document.body.getBoundingClientRect ();
                var physicalW = rect.right - rect.left;
                var logicalW = document.body.offsetWidth;

                    // the zoom level is always an integer percent value
                level = Math.round ((physicalW / logicalW) * 100);
            }
            return level;
        }

        function GetZoomLevelIE () {
                // IE before version 8
            if (screen.systemXDPI === undefined) {
                return GetZoomLevelIE7 ();
            }
            // the zoom level is always an integer percent value
            return Math.round ((screen.deviceXDPI / screen.logicalXDPI) * 100);
        }

        function GetMagnification () {
            var message = "";
            if ('deviceXDPI' in screen) {
                var zoomLevel = GetZoomLevelIE ();
                message += "The current zoom level is " + zoomLevel + "%.";
            }
            else {  // Firefox, Opera, Google Chrome and Safari
                message = "Your browser does not support this example!";
            }

            var info = document.getElementById ("info");
            info.innerHTML = message;
        }
    </script>
</head>
<body onload="GetMagnification ()">
    <div id="info" style="background-color:#e0b0b0; width:250px"></div>
    Use the CTRL and + keys to zoom in and the CTRL and - keys to zoom out.
    Refresh the page (F5) after zooming.
</body>