How To Detect Browser User Agent And Add Mobile Website Support

There remains one major problem with the application as it stands right now: when viewed on a mobile browser, the animation breaks down and the viewer window causes undesirable effects such as rescaling the page. As such, we’ll need to tweak the operation just slightly for mobile browsers (this wasn’t such a problem in the 1990s and early 2000s, but with most web browsing done via mobile, it would be dumb not to account for the difference.

iteration7.html

<script>
$(document).ready(function(){
       detectUserAgent();
    });
</script>

In the main HTML file, the only change we’re going to make is calling a different function from our JS file. In this case, it’s a function that will detect the user agent, letting the application know whether to run the desktop or mobile version of the app.

iteration7.js

function detectUserAgent() {
    if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/Android/i))) {
        location.replace("mobile.html");
    }
    startplayer();
    }

function startplayer() {
    $.getScript("videofiles.js", function() {
        });
    makebox();
    }

In the JavaScript, the new detectUserAgent() function queries the navigator.userAgent object to see if it contains the string “iPhone”, “iPad”, or “Android” which would indicate a mobile device and browser. If one of those strings is found in the object, then the current page is redirected to “mobile.html”. Otherwise, the startplayer() function is called.

In the startplayer() function, we use the jQuery getScript() method to load another JS file within the script as running. In this case, it will load the “videofiles.js” file that now contains the addresses array.

The “mobile.html” file works exactly like the main HTML file, except that it now refers to a slightly different JS file, “mobile.js” that contains the changes we need to make the mobile version work.

mobile.js

function makebox() {
    $(".window").click(function () {
        video = $(this).css("background-image");
        video = video.slice(32, -6);
        window.open("https://www.youtube.com/embed/"+video, '_blank');
    });
    $(".window:not(:animated)").each(function() {
        addy = (Math.floor(Math.random() * addresses.length));
        $(this).css({"top": Math.random() * window.innerHeight - 290+"px","left": "-"+Math.random() * 740 - 740+"px","background-image": "url('https://img.youtube.com/vi/"+addresses[addy]+"/0.jpg')", "border": "10px solid", "color": getRandomColor});
        $(this).animate({left: "2000px"}, Math.random() * 15000 + 15000, makebox);
    });
    }

We only need to make two major changes to the makebox() function to make it work on mobile: First, we need to make sure that we define all animations by pixel distances instead of screen widths. The percentage screen width method of measurement does not work correctly on some mobile browsers and can cause the flying windows to rescale themselves when they reach the right edge of the screen.

window.open("https://www.youtube.com/embed/"+video, '_blank');
Second, instead of a viewer div playing an embedded YouTube video, we’re going to open the video in a new tab. We’re still going to use the embed version of the video, though, to avoid having the full YouTube player page load (which would also be undesirable).

From this point, we just add an appropriate background video to the HTML file body using the background-video CSS property, some appropriate MIDI music using the MIDIjs JavaScript library (midijs.net), and a few navigation buttons, and the application is ready to go!