twweeb's Blog

有些網站會針對手機板來做手機版本的瀏覽介面，讓User在使用手機來看網站時，能有字體大、或以內容為主軸的設計版面。為了針對不同大小的瀏覽器(Browser)，可以用大概三種以上的方式來讓User有最舒適的介面，以方便行動裝置的User在瀏覽網頁時，先Redirect到行動版網站。第一、可以使用自適應網頁設計(Responsive Web Design)；第二、我們可以針對手機的使用者載入不同的布景；第三、可以使用本篇的方法，針對手機使用者載入不同的CSS，或其它客製選項。

用PHP來偵測手機用戶(Mobile Users)，其實沒辦法做到盡善盡美，因為PHP是利用偵測User Agent String來判斷是否為手機瀏覽，然而每款手機的型號不盡相同，沒有像Apple一樣一看就能辨認，不是iPod、iPad、就一定是iPhone，就因為現在手機越出越多，你永遠猜不出新的型號為何?

但還是能用這種簡單的PHP偵測User Agent String，來讓大多數的手機符合操作需求，或者你可以使用PHP Mobile Detect，國外的服務來偵測，類型比較多，改天再來介紹。

如何利用PHP語法，來偵測是不是使用手機瀏覽網頁

第1步 首先我們先來看判斷語法，先定義那些User Agent String屬於手機瀏覽，接著再使用PHP的判斷句，來讓如果是手機瀏覽的使用者，則執行指定流程、程式。

<?php  //定義那些User Agent String屬於手機瀏覽
function check_mobile(){
    $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
    $regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
    $regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
    $regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";   
    $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
    $regex_match.=")/i";
    return preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
} ?>
<?php if( check_mobile() ) :  //如果是手機瀏覽，則執行此段語法
?>
 哈囉，你現在正在使用手機瀏覽喔!!
<?php endif; ?>

第2步 如果你是WordPress使用者，你可以把它放到functions裡面，隨時呼叫。

function check_mobile(){
    $regex_match="/(nokia|iphone|android|motorola|^mot\-|softbank|foma|docomo|kddi|up\.browser|up\.link|";
    $regex_match.="htc|dopod|blazer|netfront|helio|hosin|huawei|novarra|CoolPad|webos|techfaith|palmsource|";
    $regex_match.="blackberry|alcatel|amoi|ktouch|nexian|samsung|^sam\-|s[cg]h|^lge|ericsson|philips|sagem|wellcom|bunjalloo|maui|";
    $regex_match.="symbian|smartphone|midp|wap|phone|windows ce|iemobile|^spice|^bird|^zte\-|longcos|pantech|gionee|^sie\-|portalmmm|";   
    $regex_match.="jig\s browser|hiptop|^ucweb|^benq|haier|^lct|opera\s*mobi|opera\*mini|320x320|240x320|176x220";
    $regex_match.=")/i";
    return preg_match($regex_match, strtolower($_SERVER['HTTP_USER_AGENT']));
}

第3步 接著在要判斷的地方就輸入PHP的判斷(if~)指令。

<?php if ( check_mobile() ) : ?>
 哈囉，你正在使用手機瀏覽~
<?php endif; ?

或者你要使用PHP的if~else~判斷指令，則使用

<?php if ( check_mobile() ) { ?>
 哈囉，你正在使用手機瀏覽~
<?php } else { ?>
 哈囉，你沒有在使用手機瀏覽~
<?php } ?>

利用PHP來針對手機用戶載入不同的CSS

第1步 再分別做好不同介面的使用者後，你可以使用以下方法來讓系統自行執行不同的CSS。