Handling Mobile Devices – Fastr Publicator Community

Checking the UserAgent
Example 1
Example 2

Here at Zmags, we strive to make our solution truly multi-platform, allowing your readers to access a single publication across all devices, be they desktop, mobile, Windows, Mac OS, iOS, or Android.

Sometimes however, there are situations where you want to handle one device differently from another. You may wish for the viewer to cover the entire screen in mobile, but only part of the window on desktop. You may wish to redirect the reader to a different mobile-optimized page, or another publication altogether. This is all made possible via "device specific code".

Checking the UserAgent

The userAgent is a property in your user's browser that indicates what device they are using to read the page. We can use Javascript to check the userAgent and respond accordingly:

var isMobile = {
    Android: function(){
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function(){
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iPhone: function(){
        return navigator.userAgent.match(/iPhone/i);
    },
    iPad: function(){
        return navigator.userAgent.match(/iPad/i);
    },
    iPod: function(){
        return navigator.userAgent.match(/iPod/i);
    },
    iOS: function(){
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function(){
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function(){
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function(){
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Once you've included this code in your page's Javascript, you can use commands such as isMobile.any(); to check for any mobile device and isMobile.iOS(); to check for an iOS device. Simply use a command of this format isMobile.device_name(); using one of the device names in red above. The line will return 'true' if the device you're checking for is the one your reader is using.

It's worth noting that Android only provides one UserAgent, while Apple has separate ones for iPad and iPhone. This is because with iPad and iPhone you're intended to customize your layout to the different devices, but with Android they are more confident you can consistently display the same layout regardless.

Example 1: Default to full screen for mobile devices:

The code below uses the isMobile code to check for mobile devices, and when found defaults to full screen. Desktop devices default to partial window view. The two views may be switched between by clicking the fullscreen button in either desktop or mobile. The full screen code comes from example 1 in this article: JavaScript Based Fullscreen

Click here to see this code demonstrated!
(You'll need to access it in both desktop and mobile to see the difference.)

<!DOCTYPE html>
<html>
<head>

<title>YOUR_TITLE_HERE</title>

<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
<script>
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();

    var viewerStyle = "";
    function fullscreen_mode(){
        var viewerDiv = document.getElementById("viewerDiv");
        if(viewerStyle == ""){
            viewerStyle = viewerDiv.style.cssText;
            viewerDiv.style.cssText = "position:absolute; top:0px; left:0px; height:100%; width:100%;";
        }
        else{
            viewerDiv.style.cssText = viewerStyle;
            viewerStyle = "";
        }

        viewer.resize();
    }
    
    var isMobile = {
        Android: function(){
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function(){
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iPhone: function(){
            return navigator.userAgent.match(/iPhone/i);
        },
        iPad: function(){
            return navigator.userAgent.match(/iPad/i);
        },
        iPod: function(){
            return navigator.userAgent.match(/iPod/i);
        },
        iOS: function(){
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function(){
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function(){
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function(){
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
</script>
</head>
<body onload="if(isMobile.any()){ fullscreen_mode(); }">

<div id="viewerDiv" style="position:fixed; width:400px; height:300px;">
    <div id="myViewerContent" style="position:absolute; width:100%; height:100%;"></div>
    <div id="fs_button" style="position:absolute; top:10px; right:10px; z-index:1;"><a href="#" onclick="fullscreen_mode();"><img src="./fstoggle.png" style="opacity:0.6; border:0;"></div><br />
</div>

</body>
</html>

To implement this on your own site, simply create an HTML file containing the code above. You will also need to download the close button image and place it in the same folder: (right-click here and choose "save target as")

Fill in the bold red text with your own title and publication ID. You may also choose the size and position of the publication on your page by customizing the viewer div's CSS. This is found to the right of the id="viewerDiv" tag. Once that's done, place the your site and open it using your favorite web browser.

Example 2: Redirect the page for mobile devices:

This code works in a similar fashion to the first example, but rather than running Javascript to make the viewer full-screen, if a mobile device is detected it redirects to another page. Desktop readers are unaffected. The live demo below sends mobile readers to the unembedded (viewer.zmags) page of the same publication, but it could just as easily be used to direct readers to a different embedded page, a different publication, or an entirely separate site not containing a Zmag. The embedded viewer code comes from example 1 in this article: Embedding Your Publication

Click here to see this code demonstrated!
(You'll need to access it in both desktop and mobile to see the difference.)

<!DOCTYPE html>
<html>
<head>

<title>YOUR_TITLE_HERE</title>

<script src="http://api.viewer.zmags.com/viewer/viewer.js" type="text/javascript"></script>
<script>
    var viewer = new com.zmags.api.Viewer();
    viewer.setPublicationID("PUB_ID_HERE");
    viewer.setParentElementID("myViewerContent");
    viewer.show();

    var isMobile = {
        Android: function(){
            return navigator.userAgent.match(/Android/i);
        },
        BlackBerry: function(){
            return navigator.userAgent.match(/BlackBerry/i);
        },
        iPhone: function(){
            return navigator.userAgent.match(/iPhone/i);
        },
        iPad: function(){
            return navigator.userAgent.match(/iPad/i);
        },
        iPod: function(){
            return navigator.userAgent.match(/iPod/i);
        },
        iOS: function(){
            return navigator.userAgent.match(/iPhone|iPad|iPod/i);
        },
        Opera: function(){
            return navigator.userAgent.match(/Opera Mini/i);
        },
        Windows: function(){
            return navigator.userAgent.match(/IEMobile/i);
        },
        any: function(){
            return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
        }
    };
</script>
</head>
<body onload="if(isMobile.any()){ window.location = 'REDIRECT_URL_HERE'; }">

<h1>Page Title Here</h1>
<p>There's space around the publication, so you can place other content!</p>

<div id="myViewerContent" style="width:800px; height:600px;"></div>

<p>More regular content...</p>

</body>
</html>

To implement this on your own site, simply create an HTML file containing the code above. Fill in the bold red text with your own title and publication ID. You may also choose the size and position of the publication on your page by customizing the viewer div's CSS. This is found to the right of the id="myViewerContent" tag. Select the URL to redirect to by replacing REDIRECT_URL_HERE, found in the <body> tag. Once that's done, place the your site and open it using your favorite web browser.

Related articles