test.html

﻿<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta charset="utf-8" />
    <title>window test</title>
    <script src="fullscreen.js"></script>
    <script>
        var dims = ["height", "width", "x", "y"];
        var types = ["", "client", "offset", "scroll", "inner", "outer", "avail"];
        var track = ["document.documentElement", "screen", "window", "block"];
        var block = null;
        setInterval(function (){
            var output = document.getElementById("output");
            if (!block)
                block = document.getElementById("block");
            dims.forEach(function (d_){
                types.forEach(function (t){
                    track.forEach(function (o){
                        var n = o;
                        var parts = o.split(".");
                        o = window;
                        parts.forEach(function (p){
                            o = o[p];
                        });
                        if (o){
                            var d = d_;
                            if (t.length > 0){
                                d = d[0].toUpperCase() + d.substring(1);
                            }
                            d = t + d;
                            var id = n + "." + d;
                            var e = document.getElementById(id);
                            if (o[d] != undefined || e){
                                if (!e){
                                    e = document.createElement("div");
                                    e.id = id;
                                    output.appendChild(e);
                                }
                                e.innerHTML = (id + " = " + o[d])
                                    .replace("document", "D")
                                    .replace("documentElement", "DE")
                                    .replace("body", "B")
                                    .replace("window", "W")
                                    .replace("screen", "S");
                            }
                        };
                    });
                });
            });
        }, 100);
    </script>
    <style>
        html, body {
            padding: 0;
            margin: 0;
        }
        * {
            box-sizing:border-box;
        }
    </style>
</head>
<body>
    <div id="block" style="box-sizing:border-box;position:absolute;left:0;top:0;width:100%;height:100%;"></div>
    <div style="position:absolute;">
        <input type="text" value="text" /><input type="button" onclick="toggleFullScreen()" value="FULL" />
        <div id="output" style="font-size:6pt;"></div>
    </div>
</body>
</html>