Javascript to determination the device type IOS or Android and sho div depend on that

Question

below is my code what i need to do is if the mobile androd show ANDROID_USERS div if iphone show IOS_USERS div ONE TIME ONLY "first visit" every thing working on the right way but when i use this https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf

its not check the mobile type in right way i need to know if i check the mobile type in right way ?

    <head>
    <style>
            #IOS_USERS {
                display: block;
                display:none;
            }

            #ANDROID_USERS {
                display: block;
                display:none;
            }

    </style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
//check mobile type
var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone/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());
    }

};

            function setCookie(cname, cvalue, exdays) {
                var d = new Date();
                d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));
                var expires = "expires=" + d.toGMTString();
                document.cookie = cname + "=" + cvalue + "; " + expires;
            }


            function getCookie(cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i].trim();
                    if (c.indexOf(name) == 0) return c.substring(name.length, c.length);
                }
                return "";
            }

            function MarkVisited() {
                setCookie("visited", "visited", 10)
            }

            function ClearCookie(cname) {
                setCookie(cname, "", 1)
            }



            $(document).ready(function() {

                 if (getCookie('visited') == "" && isMobile.iOS()) {
                    $('#ANDROID_USERS').hide();
                    $('#IOS_USERS').show();
                }
                else if (getCookie('visited') == "" && isMobile.Android()) {
                    $('#ANDROID_USERS').show();
                    $('#IOS_USERS').hide();
                }
                MarkVisited();
            });
</script>
    </head>
    <body>

        <div id="IOS_USERS">
         IOS 
        </div>
        <div id="ANDROID_USERS">
         ANDROID 
        </div>
        <button id="ClearCookie" onClick="ClearCookie('visited')">Clear Cookie</button>
    </body>

</html>

score 1 · Answer 1 · edited May 23 '17 at 11:49

1

You can have separate css for for Android and Iphone based on the device os you can load the css this is best way to handle it. Detect device and swap the CSS file - jQuery

edited May 23 '17 at 11:49

Community

1
1

answered Mar 31 '14 at 09:06

Ranjith

510
3
10

Can you be more specific – Ranjith Mar 31 '14 at 09:09
i want to test my code ton know if its work well or not ? in something online – user3469218 Mar 31 '14 at 09:13
1

Add user agent to your browser and check it. https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf – Ranjith Mar 31 '14 at 09:16
please check my question i update it but still check the mobile on worng way – user3469218 Mar 31 '14 at 12:15
please check my question – user3469218 Mar 31 '14 at 13:07

Javascript to determination the device type IOS or Android and sho div depend on that

1 Answers1