Media query to detect full screen mode — standards way (kind of)

dabblet.css

/**
 * Media query to detect full screen mode — standards way (kind of)
 */

@media screen and (-webkit-view-mode:windowed)  {
    body { 
        font-size: 12px;
        border: 10px solid green;
    }
}

@media screen and (-webkit-view-mode:minimized) {
    body {
        font-size: 1px;
        border: 1px solid green;
    }
}

@media screen and (-webkit-view-mode:maximized) {
    body {
        font-size: 16px;
        border: 20px solid green;
    }
}

@media screen and (-webkit-view-mode:fullscreen) {
    body {
        font-size: 20px;
        border: 20px solid red;
    }
}

body {
    -webkit-transition: all 1s ease;
    -moz-transition: all 1s ease;
    -o-transition: all 1s ease;
    transition: all 1s ease;
}

dabblet.html

<h1>Пример странички</h1>

<p>Попробуйте свернуть ее, развернуть в окно, развернуть на весь экран, перевести в полноэкранный режим (F11) и обратно. Если <code>view-mode</code> у вас работает, вы должны увидеть изменение размера шрифта и толщины рамки, а если повезет — то и ее цвета :)</p>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}