显示 div 的 Javascript 取决于移动设备类型答案

【问题标题】：Javascript to show divs depend on mobile type显示 div 的 Javascript 取决于移动设备类型
【发布时间】：2014-03-31 12:30:36
【问题描述】：

我试图通过 javascript 来做到这一点： 1- 如果 ANDROID 显示 ANDROID_USERS div 如果 IPHONE 显示 IOS_USERS div，则检查移动类型 2- 在第一次访问时仅显示一次上述 div ONEC

但是检查移动类型它不工作所以我需要知道我是否以我使用的正确方式做它

https://chrome.google.com/webstore/detail/user-agent-switcher/lkmofgnohbedopheiphabfhfjgkhfcgf

测试代码是否适用于 iphone 和 android

我需要知道的是我是否以正确的方式检查手机类型？

<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>

【问题讨论】：

标签： javascript android jquery html iphone

【解决方案1】：

如果您试图让您的网站适合大多数设备、浏览器等...，我建议您使用http://getbootstrap.com/2.3.2/getting-started.html...遵循他们的一些说明，如何进行布局设计、网格等。这将节省您为每个设备创建单独的 UI 的大量时间。希望这对您有所帮助。 :)

【讨论】：

我需要确保脚本在我使用手机时显示 IOS_USERS div，所以我想知道 //check mobile type 是否正常工作，如果你看一下脚本的话方式？