How To Detect User Is On A Mobile Device and Display a Lightbox Popup with Link to Mobile Website

Introduction

The main reason why I thought of writing this "How to detect user is on a mobile device and display a lightbox kind of popup with link to mobile website" is because I had to implement this feature for one of my web projects. I checked the internet for days to find out a complete solution but I couldn't find any. We can easily detect if it's a mobile device or not using jQuery. But then, we need to show a nice lightbox popup with link to mobile website. This piece of code is very easy to integrate to your existing website and can do the following things:

1. Mobile device detection
2. Display lightbox kind of popup using FancyBox on page load
3. User is able to click to visit to the mobile website or simply close the popup to remain on full site (this is to inform user that we have a mobile website instead of full site).

Here is the real working solution on an iPhone:

Background

You need to have some knowledge about jQuery, PHP (.NET, JSP, or anything), and FancyBox integration to your website.

Using the Code

We will start from jQuery part as it is the foundation to detect the mobile device. Please import or integrate jQuery into your project.

Here is the Mobile Device detection part written inside PHP. Here, we are using a PHP session to track user visit to the site. Otherwise, this popup will be shown again and again to the user. We have a simple code to detect the device and it will redirect you to another page.

Please make sure to add the below code in to startup page of your site, say home page. It should fire up when page loads.

<?php
if(isset($_GET['mVar'])){
    session_start();
    $_SESSION['views']=1; // Declaring a session to track the visits
}


if(!$_SESSION['views'] == 1){ // Checking the session and doing the redirection
    if ($_SERVER["QUERY_STRING"] == null){
        echo "
        <script type=\"text/javascript\">
        if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
            window.location.replace('http://www.domain.com/checkmobile.php');} 
        </script>
                ";
    }
}
?>  

You don't necessarily redirect to another page but I would prefer to do that as you can style your popup without making any problems to your existing site (FancyBox has some JS and CSS files. These CSS properties will break your site).

I am assuming that you have already downloaded FancyBox from here and imported it to your webpage. Please keep in mind that you need add jQuery library as well.

<!-- Add jQuery library -->
<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.7.2.js"></script>

<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" 
src="http://www.domain.com/source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" 
href="http://www.domain/source/jquery.fancybox.css" 
media="screen" /> 

Optionally, you can use this CSS to style your FancyBox shadow:

.fancybox-custom .fancybox-skin {
            box-shadow: 0 0 50px #222;
        } 

Ok, now we have done all basic setup here and we need to load FancyBox on Page Load. Because we are redirecting user from website to this page. Here we are using FancyBox iframe method to generate our popup message. You can use any other alternative methods like image as a popup but my concern was to maintain responsiveness on mobile device. So HTML iframe helps me to do that instead of image.

Here is the jQuery code to load FancyBox on start up of webpage:

jQuery(document).ready(function () {
    jQuery.fancybox({
            'width': '75%', //Use percentage to maintain responsiveness
            'height': '75%',
            'autoScale': true,
            'transitionIn': 'fade',
            'transitionOut': 'fade',
            'type': 'iframe',
            'href': 'popupbox.htm'
     });
    }); 

That's all you have to do. When you click the button on popup, it will bring you to the mobile site (please don't forget to make a link to your mobile site on the button). This will display popup as the above image (Please design your popup page as you wish) on any mobile device. It has been tested with iPhone 3GS, iphone 4S (iOS 7) ,iPad and many Android devices to ensure popup is centered and shows nicely.

But we still have one last thing to do. If user decided to stay on current site and close the popup by clicking the close button? Then we need to close the popup and redirect user to website. We have to tweak FancyBox close button (Please refer to FancyBox API) to fulfill this requirement. Here is the jQuery code for that and you can add it to your webpage as well.

$(document).ready(function(){

    $('.fancybox-item').live('click', function(e) {  
        window.location.replace("http://www.domain.com?mVar=1");
    });
}); 

Things To Do

• You can optimize mobile detection script
• You can use any other lightbox libraries not only FancyBox
• You can make nice popup and make it responsive for better viewing on any device

Happy coding!!!