显示div的Javascript取决于移动类型

我试图通过javascript来做到这一点：1-如果ANDROID显示ANDROID_USERS如果IPHONE显示IOS_USERSdiv，请检查移动类型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>

如果您想使

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

相关内容

最新更新

热门标签：