Show Mobile App dowload layer only in Mobiles and Tablets

Question

We have both website and Native App (iOS & Android) for my company.

Requirement

I would like to show Modal dialog layer particularly to Mobiles and tablets when user access site in devices and show message that you can download our native app

Problem

The HTML,CSS & javaScript code for these layer is impacting our page weight, is there any way we can include specific code (HTML, CSS & javaScript) dynamically only on Mobile & Tablet devices.

Thanks

Avinash Mudunuri

Answer 1

You're looking for something called a userAgent . According to MSDN ,

identifies your browser and provides certain system details to servers hosting the websites you visit.

A typical useragent will look like this :

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:12.0) Gecko/20100101 Firefox/12.0

For android phones, it will look something like this :

Mozilla/5.0 (Linux; U; Android 4.0.3; ko-kr; LG-L160L Build/IML74K) AppleWebkit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30

This property is accessible through the navigator object like this :

navigator.userAgent

See Demo here : http://jsfiddle.net/hungerpain/cC7mY/

Now, to check if your browser is a mobile browser, we have set up a system like this :

var ua = navigator.userAgent;
if (ua.indexOf("Android") >= 0) {
     //its an android phone
     var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
     if (androidversion != 4.0) {
        //version of android
     }
} else if ((ua.indexOf("iPhone") >= 0 || ua.indexOf("iPad") >= 0) && ua.indexOf("CriOS") == -1) {
    //you're on iOS
}

You'll have to put this at the start of your document before you load anything else in your page if you want to stop everything from loading.

NOTE CriOS is the useragent indicator of Chrome browser on Safari. That's why its included in the iOS list.