現在，我們的JavaScript或是jQuery除了可以判斷OS或是Browser之外，還能夠判斷使用者是用何種智慧型裝置 (Smart Device)連上該網頁；而這些裝置包括：智慧型手機 (Smart Phone / Mobile)或是平板電腦 (Tablet PC)等等。
在展現程式碼之前，我們要引用一個JavaScript的Framework：http://detectmobilebrowsers.com/，這個網站提供了許多程式語言判別使用者是用何種行動裝置瀏灠器的範例。在這裡我們要引用的是jQuery而不是JavaScript；因為jQuery裡有現成的$.browser.mobile可用，但這也僅能判斷到使用者是否為行動裝置上網。若要判別使用者是用何種裝置，例如：iPhone、iPad或是Android，我們還是必須另外再寫。
<!DOCUMENT HTML PUBLIC "-//W3C//DTD XHTML 4.01 Transitional//EN" "http://www.w3.prg/TR/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>How to detect the Smart Device by jQuery?? </title>
<script type="text/javascript" src="./jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="./jquery-detectmobilebrowser.js"></script>
<script language="JavaScript" type="text/javascript">
var smtDev = (function() {
var _userAgent = window.navigator.userAgent.toLowerCase();
return {
iPod: function() { return _userAgent.search("ipod"); }(),
iPhone: function() { return _userAgent.search("iphone"); }(),
iPad: function() { return _userAgent.search("ipad"); }(),
Android: function() { return _userAgent.search("android"); }(),
BlackBerry: function() { return _userAgent.search("blackberry"); }(),
WebOS: function() { return _userAgent.search("webos"); }(),
WindowsPhone: function() { return _userAgent.search("windowsphohe"); }()
};
}());
</script>
</head>
<body>
</body>
<script language="JavaScript" type="text/javascript">
(function($) {
$(window.document).ready(function() {
if ($.browser.mobile === true) {
if (smtDev.iPhone != -1)
window.location.href = "./iphone.html";
else if (smtDev.Android != -1)
window.location.href = "./andmobile.html";
else if (smtDev.WindowsPhone != -1)
window.location.href = "./wmp.html";
else
alert("You used other Smart Mobile Phone !! \n");
}
else {
if (smtDev.iPad != -1)
window.location.href = "./ipad.html";
else if (smtDev.Android != -1)
window.location.href = "./andtablet.html";
else if (smtDev.WindowsPhone != -1)
window.location.href != "./wintablet.html";
else
alert("You used other Smart Tablet or Desktop Computer!! \n");
}
return;
});
return;
})(jQuery);
</script>
</html>
最後，要特別一提的是：$.browser.mobile只能判斷出手機的裝置；如果遇到像是iPad或是Android Tablet，還需另外再寫一個if-else。
沒有留言:
張貼留言