index.html

<html>

    <head>
        <link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
        <link rel="stylesheet" type="text/css" href="handheld.css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" />
        <script>
            function checkBrowserType() {
                var col = window.getComputedStyle(document.getElementById("browsertype")).color;
                if (col == "rgb(1, 0, 0)") {
                    console.log("screen.css wurde geladen");
                    document.getElementById("output").innerHTML = "Du benutzt kein Handy";
                    document.getElementById("outimg").src = "bigimg.png";
                } else if (col == "rgb(2, 0, 0)") {
                    console.log("handheld.css wurde geladen");
                    document.getElementById("output").innerHTML = "Du benutzt ein Handy";
                    document.getElementById("outimg").src = "mobileimg.png";
                } else {
                    console.log("errrroooorrr!!!");
                }
            }
        </script>
    </head>

    <body onload="checkBrowserType();">
        <div id="browsertype"></div>
        <div id="output"></div>
        <img id="outimg" src="">
    </body>


</html>