開發網站平台時常常需要考慮到user是用什麼裝置連進來，
因為不同裝置或瀏覽器在支援上會有差異，
(ex. iOS對flash的支援)
或針對行動裝置用戶傳送不同的效果或頁面等，
都可能要用到這樣的判斷，
實際研究後，發現只要在server端做個判斷功能即可。
辨識功能主要透過 $_SERVER[ ] 的回傳資訊和建立一個變數(ex. $browser)來作邏輯判斷。
利用$_SERVER['USER_AGENT']可以回傳user的作業系統和瀏覽器版本。
如果user使用智慧型行動裝置，$_SERVER['HTTP_X_WAP_PROFILE']則會回傳1個link(連結至行動裝置資訊的xml檔)，藉由判斷他回傳有無，判別是否來自行動裝置
(據說不是所有行動裝置都會傳送這個link,不過至少到N95都有，所以應該影響不大)
ok，接下來就是code了！
改寫後程式碼如下:
<?php
//Detect mobile user client
function checkMobile() {
$mbBrowser = 0;
$userAgent = $_SERVER['HTTP_USER_AGENT']; //取得用戶端的使用環境
$accept = $_SERVER['HTTP_ACCEPT'];
//"i" 不區分大小寫
if (preg_match('/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android)/i',
strtolower($userAgent))) {
$mbBrowser++;
}
//非行動裝置
if (strpos(strtolower($userAgent),'windows') > 0) {
$mbBrowser = 0;
}
//有HTTP_X_WAP_PROFILE則必是行動裝置
if ((strpos(strtolower($accept),'application/vnd.wap.xhtml+xml') > 0)
or ((isset($_SERVER['HTTP_X_WAP_PROFILE'])
or isset($_SERVER['HTTP_PROFILE'])))) {
$mbBrowser++;
}
//額外放入暴力判斷
$mobileSource = strtolower(substr($userAgent, 0, 4));
$mbArray = array(
'w3c ','acs-','alav','alca','amoi','audi','avan','benq','bird','blac',
'blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno',
'ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-',
'maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-',
'newt','noki','oper','palm','pana','pant','phil','play','port','prox',
'qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar',
'sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-',
'tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp',
'wapr','webc','winw','winw','xda ','xda-'
);
if (in_array($mobileSource,$mbArray)) {
$mbBrowser++;
}
//ALL_HTTP是ASP的variable
if (strpos(strtolower($_SERVER['ALL_HTTP']),'OperaMini') > 0) {
$mbBrowser++;
}
if ($mbBrowser > 0) {
return true;
} else {
return false;
}
}
?>
next, test it!
簡單做個html+css頁面讓output美觀點，
假設我想讓mobile-device user看見手機，non-mobile user看見PC，
HTML+CSS code:
<html>
<head>
<title>Detect Mobile Test</title>
<style type="text/css">
#pic {
z-index:1;
position: absolute;
left:0px;
top:0px;
}
#word {
position: absolute;
font-size:120%;
z-index:2;
left:65px;
top:100px;
}
</style>
</head>
<body>
<?php
if(checkMobile()) {
echo '<div id="word">by Mobile</div>';
echo '<div id="pic"><img src="./mobile.jpg" /></div>';
}
else {
echo '<div id="word">by PC</div>';
echo '<div id="pic"><img src="./monitor.jpg" /></div>';
}
?>
</body>
</html>
1. 模擬user來自非行動裝置
2. 模擬user來自行動裝置
Reference.
1.
User agent WIKI
2.
PHP: $_SERVER
3.
ASP資料
4.
iPhone、Android手機模擬器 (Google Chrome內建)
