Example code: index.html

<html>
<head>
    <title>Dual Monitor Test</title>
    <link rel="stylesheet" href="./resources/css/dualmonitor.css" />

</head>
<body>

<script src="http://localhost/js/dapi.js"></script>
<script src="./index.js"></script>

<div id="display"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="index.js"></script>
</body>
</html>

Example code: index.js

var Dapi = new Promise((resolve, reject) => {
    try {
        if (window.dapi === undefined) {
            loadedDapi = true;
            reject('Could not load dapi.js');
        } else {
            try {
                window.dapi.init((ok) => {
                    if (ok) {
                        console.log('success');
                        resolve(window.dapi);
            }
            else {
                        loadedDapi = true;
                        reject('Could not initialize dapi');
                    }

                })
            } catch (e) {
                loadedDapi = true;
                reject('Could not initialize dapi:', e.message);
            }
        }
    } catch (e) {
        loadedDapi = true;
        reject(e.message);
    }
}).catch((reason) => {
    // Log the rejection reason
    loadedDapi = true;
    console.error('dapi error: ' + reason);
    return Promise.reject('dapi error: ' + reason);
});

function _loadDapiVersion(param)
{
    var monitorCount = window.dapi.displays.monitorCount;
    console.log("Monitor Count", monitorCount);
    var monitor1Width = window.dapi.displays.monitor1.width;
    var monitor1Height = window.dapi.displays.monitor1.height;
    var monitor2Width = window.dapi.displays.monitor2.width;
    var monitor2Height = window.dapi.displays.monitor2.height;

    var displayProps   = {
        monitorCount:   monitorCount,
        monitor1Width:  monitor1Width,
        monitor1Height: monitor1Height,
        monitor2Width:  monitor2Width,
        monitor2Height: monitor2Height
    }

    _processUI(displayProps)

    window.dapi.displays.subscribe(_listenMonitorChangeEvent.bind(this));
};

function _listenMonitorChangeEvent() {
    var monitorCount = window.dapi.displays.monitorCount;
    var monitor1Width = window.dapi.displays.monitor1.width;
    var monitor1Height = window.dapi.displays.monitor1.height;
    var monitor2Width = window.dapi.displays.monitor2.width;
    var monitor2Height = window.dapi.displays.monitor2.height;

    var displayProps   = {
        monitorCount:   monitorCount,
        monitor1Width:  monitor1Width,
        monitor1Height: monitor1Height,
        monitor2Width:  monitor2Width,
        monitor2Height: monitor2Height
    }

    _processUI(displayProps)

    console.log('Displays', window.dapi.displays);
}

window.onload = function(ev) {
    Dapi.then(_loadDapiVersion.bind(this)).catch(() => {});
}

function _processUI(displayProps) {
    var el = document.getElementById('display');
    var body = document.getElementsByTagName('body');

    if (displayProps.monitorCount > 1) {
        el.innerHTML = '<div id="monitor1">' +
            '<p>Monitor 1</p></div>' +
            '<div id="monitor2">' +
            '<p>Monitor 2</p></div>';

        document.getElementById('monitor1').style.width  = displayProps.monitor1Width + 'px';
        document.getElementById('monitor1').style.height = displayProps.monitor1Height + 'px';

        document.getElementById('monitor2').style.width  = displayProps.monitor2Width + 'px';
        document.getElementById('monitor2').style.height = displayProps.monitor2Height + 'px';
        document.getElementById('monitor2').style.left   = displayProps.monitor1Width + 'px';
    }
    else {
        el.innerHTML = '<div>' +
            '<div style="position:absolute;width:100%;height:100%;background:#30bbbb;">' +
            '<p>Single Monitor</p></div>' +
            '</div>';
    }
}

Example code: resources\css\dualmonitor.css

@charset "utf-8";

body {
    margin:0;
}


p {
    font-size: 60px;
    position: absolute;
    width: 100%;
    top: 50%;
    text-align: center;
    -webkit-margin-before: 0px;
}

#monitor1 {
    background-color: #892034;
    position: absolute;
}

#monitor2 {
    position: absolute;
    background-color: #7a43b6;
}

#clickme {
    font-size: 12px;
}