{{html}}
<pre id='browser-info'></pre>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        var browserInfo = document.querySelector('#browser-info');
        browserInfo.innerText = JSON.stringify({
            "document.body.clientWidth": document.body.clientWidth, /* 可见区域宽度 */
            "document.body.clientHeight": document.body.clientHeight, /* 可见区域高度 */
            "document.documentElement.clientWidth": document.documentElement.clientWidth, /* 页面对象宽度（即BODY对象宽度加上Margin宽） */
            "document.documentElement.clientHeight": document.documentElement.clientHeight, /* 页面对象高度（即BODY对象高度加上Margin高） */
            "document.body.offsetWidth": document.body.offsetWidth, /* 网页可见区域宽(body)，包括border、margin等 */
            "document.body.offsetHeight": document.body.offsetHeight, /* 网页可见区域宽(body)，包括border、margin等 */
            "document.body.scrollWidth": document.body.scrollWidth, /* 网页正文全文宽，包括有滚动条时的未见区域 */
            "document.body.scrollHeight": document.body.scrollHeight, /* 网页正文全文高，包括有滚动条时的未见区域 */
            "document.body.scrollTop": document.body.scrollTop, /* 网页被卷去的Top(滚动条) */
            "document.body.scrollLeft": document.body.scrollLeft, /* 网页被卷去的Left(滚动条) */
            "window.screenTop": window.screenTop, /* 浏览器距离Top */
            "window.screenLeft": window.screenLeft, /* 浏览器距离Left */
            "window.screen.height": window.screen.height, /* 屏幕分辨率的高 */
            "window.screen.width": window.screen.width, /* 屏幕分辨率的宽 */
            "window.screen.availHeight": window.screen.availHeight, /* 屏幕可用工作区的高 */
            "window.screen.availWidth": window.screen.availWidth, /* 屏幕可用工作区的宽 */
        }, null, 4);
    })
</script>
{{/html}}

{{html}}
<pre id='screen-info'></pre>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var screenInfo = document.querySelector('#screen-info');
    screenInfo.innerText = 'window.screen.width        : ' + window.screen.width + '\n'
                         + 'window.screen.height       : ' + window.screen.height + '\n'
                         + 'window.devicePixelRatio    : ' + window.devicePixelRatio + ' (' + (Math.round(window.devicePixelRatio * 10000) / 100) + '%)\n'
                         + 'Actual screen resolution   : ' + (window.screen.width * window.devicePixelRatio) + ' x ' + (window.screen.height * window.devicePixelRatio) + '\n'
                         + 'Actual screen DPI          : ' + getScreenDPI();
}, false);

function getScreenDPI() {
    for (var dpi = 56; dpi < 2000; ++dpi) {
        if (matchMedia('(max-resolution: ' + dpi + 'dpi)').matches === true) {
            return dpi;
        }
    }
}
</script>
{{/html}}

{{html}}
<img id="image" src="/bin/download/FlamingoThemes/Iceberg/logo.svg" style="background: #3e7cbc;" />
<pre id="image-info"></pre>
<script>
document.addEventListener('DOMContentLoaded', function() {
    var image = document.querySelector('#image');
    var imageInfo = document.querySelector('#image-info');
    var info = getImageInfo(image);
    imageInfo.innerText = 'image.width  : ' + info.width + '\n'
                        + 'image.height : ' + info.height;
}, false);

function getImageInfo(imageOrUrl) {
    var image = new Image();
    image.src = (typeof imageOrUrl === 'string' ? imageOrUrl : imageOrUrl.src);
    return {
        width : image.width,
        height : image.height
    };
}
</script>
{{/html}}