Popup to display if viewed on mobile

Question

I have a website that needs to redirect mobile users to a mobile site, however because of the sites being hosted in different places, I can't set the cookie to remember if they've been directed from the mobile site. Therefore there is a continuous loop.

All I want to do now is display a popup if the user is viewing on a mobile, offering them the option to view the website on a mobile or cancel to view the full site.

I know this will be possible in Javascript/jQuery, but I'm not sure how to go about it.

Could anybody help me with this please?

Thanks

Solution 1

You just just add the pop-up to your HTML, hide it on default and display it if it's a mobile device using CSS.

/* hidden on default */
div#popup { display: none; }

/* use a media query to filter small devices */
@media only screen and (max-device-width:480px) {
    /* show the popup */
    div#popup { display: block; }
}

This is the best option by far, performance-wise. All modern phones support media-queries, so you won't have issues with that either.

Just add two links asking the user to go to the desktop site or mobile one. If he picks the desktop site, you can leave the popup out using a server-side language, or just remove the popup using javascript.

Solution 2

Try this...

// Check for mobile user agent
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
    //alert("MOBILE DEVICE DETECTED");              
} else {
    //alert("NO MOBILE DEVICE DETECTED");
}  

Solution 3

You can check the user agent. Here you can get detailed information.