JSFiddle - React, Tailwind, and code Playground

by phloe

HTML

<table id="touch">
    <thead>
        <tr><th colspan="2">Touch detection</th></tr> 
        <tr><th>Method</th><th>Result</th></tr>       
    </thead>    
    <tbody>
    </tbody>
</table>

<table id="display">
    <thead>
        <tr><th colspan="2">Display</th></tr>
        <tr><th>Property</th><th>Result</th></tr>       
    </thead>    
    <tbody>
    </tbody>
</table>

CSS

body {
    font: 12px/1.2 Arial;
}
table {
    border: 1px solid #EEE;
    border-collapse: collapse;
    margin: 20px:
}
th, td {
    border: 1px solid #EEE;
    padding: 5px 10px;
}

JavaScript

var Prefixes = ["-webkit-", "-moz-", "-o-", "-ms-", ""],
    prefixes = ["webkit", "moz", "o", "ms", ""];

var tests = {

    touch: {

        "ontouchstart": !! ("ontouchstart" in window),
        "DocumentTouch": !! (window.DocumentTouch && document instanceof DocumentTouch),
        "maxTouchPoints": maxTouchPoints(),
        "@touch-enabled": mq()

    },
    display: {

        "screen.width": screen.width,
        "screen.height": screen.height,
        "devicePixelRatio": window.devicePixelRatio

    }
};

window.onload = function() {
    var test, table, tbody, tr, tdMethod, tdResult, result;

    for (var category in tests) {
        table = document.getElementById(category);
        tbody = table.getElementsByTagName("tbody")[0];
        test = tests[category];

        for (var property in test) {
            result = test[property];
            tr = document.createElement("tr");
            tdMethod = document.createElement("td");
            tdMethod.innerHTML = property;
            tr.appendChild(tdMethod);
            tdResult = document.createElement("td");
            tdResult.innerHTML = typeof result == "boolean" ? (result ? "Supported" : "Not Supported") : result;
            tr.appendChild(tdResult);
            tbody.appendChild(tr);
        }


    }

};

function maxTouchPoints() {
    var nav = window.navigator,
        prop, prefix, l = prefixes.length;
    if (!nav) {
        return false;
    }
    for (var i = 0; i < l; i++) {
        prefix = prefixes[i];
        prop = prefix + (prefix ? "M" : "m") + "axTouchPoints";
        if (prop in nav && nav[prop] > 0) {
            return true;
        }
    }
    return false;
}

function mq() {
    var id = "touch-test-by-mq",
        rule = ["@media (", prefixes.join("touch-enabled),("), ")", "{#", id, "{top:9px;position:absolute}}"].join(""),
        style = ["&#173;", "<style>", rule, "</style>"].join(""),
        html = [style, "<div id=\"", id, "\"></div>"].join("");

    var body =...