Thiết bị di động ngày càng phổ biến, Internet không còn là độc quyền của PC và các trình duyệt web trên PC nữa mà đã trở nên dễ dàng hơn bao giờ hết với các trình duyệt web di động. Bài viết này, NhanWeb chia sẻ với các bạn cách lập trình xác định thiết bị đầu cuối (thiết bị duyệt web) để tìm kiếm phiên bản thích hợp cho thiết bị này.
Duyệt web qua thiết bị mobile ngày càng phổ biến
Giả sử, bạn nhận thấy website của bạn ngày càng phát triển và bạn có 2 phiên bản: một phiên bản cho PC và một phiên bản giành cho điện thoại di động. Trong bài viết này, mình sử dụng 2 phiên bản của website TimViecNhanh.COM là :
- http://mobi.timviecnhanh.com/
- http://www.timviecnhanh.com/
Vấn đề đặt ra ở đây là làm thế nào để khi người dùng truy cập vào website TimViecNhanh.COM qua mobile, hệ thống sẽ có thể xác định được thiết bị truy cập là mobile và tự động chuyển người dùng về trang mobi.timviecnhanh.com ?
Code toàn bộ trước hen, giải thích sau :
[php] <?//****************************************************************************************
// Vui long khong xoa dong nay
// Xac dinh thiet bi di dong va PC
// Author: Nguyen Duy Nhan
// Website: wwww.nhanweb.com – www.vnwebmaster.com
// Email: [email protected]
//****************************************************************************************/
//Configuration
global $userBrowser;
global $userAccept;
//Mang xac dinh cac thiet bi di dong
$mobiidentity = array(‘wapbrowser’,’up.browser’,’up/4′,’mib’,’cellphone’,’go.web’,
‘nokia’,’panasonic’,’wap’,’wml-browser’,’wml’,’samsung’
);
//Mang xac dinh trinh duyet web thong thuong
$pcidentity = array(
‘mozilla’,’gecko’,’opera’,’omniweb’,’msie’,’konqueror’,’safari’,
‘netpositive’ ,’lynx’ ,’elinks’ ,’links’ ,’w3m’ ,’webtv’ ,’amaya’ ,
‘dillo’ ,’ibrowse’ ,’icab’ ,’crazy browser’ ,’internet explorer’
);
$pspidentity= array(‘PlayStation Portable’);
$iPhoneidentity= array(‘iphone’);
$linkformobile = "http://mobi.timviecnhanh.com";
$linkforweb = "http://timviecnhanh.com";
// chuyen AGENT ve lower case
$userBrowser = strtolower($_SERVER[‘HTTP_USER_AGENT’]);
// chuyen HTTP_ACCEPT ve lower case
$userAccept= strtolower($_SERVER[‘HTTP_ACCEPT’]);
if (stristr($userAccept,’wml’)) {
$driver = "WML";
}else{
//check cho thiet bi di dong thong thuong
if(check_identity($userBrowser, $mobiidentity))
$driver = "WML";
elseif(check_identity($userBrowser, $pcidentity))
$driver = "PC";
elseif(check_identity($userBrowser, $pspidentity))
$driver = "WML";// Co the define lai 1 gia tri khac de sau nay xu ly
elseif(check_identity($userBrowser, $iPhoneidentity))
$driver = "WML";// Co the define lai 1 gia tri khac de sau nay xu ly
else //Khong tim thay thi mac dinh la thiet bi di dong luon ^_^
$driver = "WML";
}
//Ok ! Sau khi xac dinh thiet bi xong roi thi redirect ve cho thich hop cua no
switch ($driver){
case ‘PC’:
header("Location: ".$linkforweb);
exit;
case ‘WML’:
header("Location: ".$linkformobile);
exit;
}
function check_identity($userBrowser, $identity){
foreach($identity as $value){
if(stristr($userBrowser, $value)){
//Tim thay browser
return true;
}
}
//Khong tim thay
return false;
}
?>
[/php]
Lý giải một tí
Trong đoạn code trên chúng ta sẽ dựa vào 2 giá trị được server trả về là HTTP_USER_AGENT và HTTP_ACCEPT để tìm hiểu browser mà người dùng duyệt web. Qua đó, xác định được các browser nào là browser giành cho di động cũng như loại browser của nó. Dựa vào đó, chuyển hướng đến trang thích hợp (hoặc bạn có thể làm gì cũng được sau khi xác định được loại thiết bị đúng không ?)
Trong đoạn code trên, mình check tổng cộng 4 loại thiết bị bao gồm Mobile, Computer, Play Station, Iphone. Nếu bạn không thích check cái nào thì bỏ bớt nếu thích.
Hàm check_identity() được sử dụng để tìm kiếm trong chuỗi $_SERVER[‘HTTP_USER_AGENT’] các giá trị được nói đến trong mảng từ khóa giúp xác định thiết bị. Nếu từ khóa tồn tại trong chuỗi này thì thiết bị được định dạng tương ứng là thiết bị thuộc loại đó. Mảng từ khóa này các bạn có thể bổ sung tùy ý.
Phần còn lại chắc không cần phải giải thích nữa >:D<
Vậy mình sẽ gọi hàm này ở đâu là tiện nhất.
Nên đặt nó ở đầu trang (và gần như chắc chắn là như vậy). Trước khi bạn xuất bất kì dữ liệu nào ra màn hình. Điều này phù hợp ở chỗ khi xác định xong thiết bị là tiến hành xử lý ngay không cần phải làm các động thái khác gây hao tốn tài nguyên không cần thiết.
Minh phai dat code nay o trang index(trang chay dau tien) de khi chua vao trang web thi ta da biet nen chuyen den phien ban mobile hay PC,phai vay ko admin? (Xin loi vi ko ghi duoc tieng viet co dau)
code đâu mà ko thấy?
Đặt ở chỗ nào hợp lý bác nhỉ? header hay index hả bác
Header, lúc website chưa tải xuống.
Anh Nhân cho em hỏi?
Sao khi chèn vào header trong trang mobile thì chạy được nhưng khi chèn vào header cho destop thi web lại không vào được. Thông báo có quá nhiều chuyển hướng. :((
Chú ý đoạn :
case ‘PC’:
header(“Location: “.$linkforweb);
exit;
Nếu trang chính của bạn là trang được chèn đoạn code, chúng ta có thể lý giải đoạn code mà tôi đã đăng trong bài theo kiểu 1 vòng lặp không có điểm dừng: truy cập trang abc.com, nếu trang abc.com được xác định là trang dành cho PC thì lại tiếp tục chuyển hướng đến trang abc.com ==> lại tiếp tục kiểm tra thiết bị rồi lại tiếp tục redirect về trang abc.com và cứ như vậy.
Trong trường hợp này, bạn không nên chuyển hướng tiếp mà nên thoát khỏi vòng switch để code chạy tiếp phần còn lại. Bằng cách thay đổi đoạn code
case ‘PC’:
header(“Location: “.$linkforweb);
exit;
thành
case ‘PC’:
break;
Như vậy, nếu đã là PC rồi thì break (thoát ra) khỏi vòng switch và tiếp tục thực thi các lệnh phía dưới (code website của bạn).
Greate, You are good coder !
Em co tao 1 bai test don gian,
3 file php
index.php (chua doan code cua anh trong tag head)
pc.php (echo cai gi day)
mobile.php (echo cai gi day)
roi thu nghiem thi thay luc nao no cung link vo cai pc.php
Bạn thử echo biến $userBrowser xem browser là gì. Nếu trình duyệt của thiết bị di động không nằm trong danh sách trên thì bạn bổ sung thêm vào.
bài viết rất bổ ích! cảm ơn rất nhiều
bạn đã test chưa? Mình cũng bị giống bạn ở trên, lúc nào nó cũng chỉ duyệt trên PC :((
Chào Mr.oxiu,
Có thể do trình duyệt của bạn chưa được định danh trong mảng $mobiidentity nên sẽ không thể redirect. Cách tốt nhất trong trường hợp này là bạn xem header của trình duyệt điện thoại của bạn và bổ sung vào danh sách này là ổn.
bạn ấy post mà hok có test, chạy cùi bắp,
Tôi có viết 1 hàm cơ bản, tuy nhiên vẫn chưa đầy đủ:
function browser_mode() {
$define = array(
‘type’ => array(
‘mobile’ => array(‘mobile’,’opera mobi’,’en-my’),
‘desktop’ => array(‘windows nt’,’ubuntu; linux’,’fedora; linux’,’chrome os’)
),
‘name’ => array(
‘firefox’ => array(‘firefox’),
‘msie’ => array(‘msie’),
‘opera’ => array(‘opera’),
‘chrome’ => array(‘chrome’),
‘coolnovo’ => array(‘coolnovo’),
‘safari’ => array(‘safari’)
)
);
$browser = array( ‘type’ => ”, ‘name’ => ”);
$identity = strtolower($_SERVER[‘HTTP_USER_AGENT’]);
foreach($define as $mode => $array) {
foreach($array as $name => $item) {
foreach($item as $v) if(stristr($identity, $v)) { $browser[$mode] = $name; break; }
if($browser[$mode] != ”) break;
}
}
return $browser;
}
hàm trả về mảng 2 tham số: array(‘type’, ‘name’). loại thiết bị và tên trình duyệt.
ví dụ:
$browser = browser_mode();
echo ‘loại thiết bị: ‘ . $browser[‘type’];
echo ‘tên trình duyệt: ‘ . $browser[‘name’];
các bạn cùng chúng tôi test các trình duyệt và hệ điều hành khác, để bổ sung cho đầy đủ tấc cả, bằng liên kết này nhé: http://trinhduyet.cogau.com/
nhấn nút xác nhận, chúng tôi sẽ cập nhật thông tin trình duyệt của các bạn và viết thêm cho đầy đủ, thân ái.
Cho e hỏi 1 vấn đề như sau ạ :(
Cách trên giúp mình xác đinh dc cái nao la PC ,cái nào là mobile để ma trả về phiên bản cho phù hợp,
Vậy h em có 2 phiên bản dành cho di động ,1 dành cho các dòng smatphone hiện nay và 1 dành cho dòng java,em muốn tách 2 dòng nay ra de ma trả về phiên bản cho đúng thì phải làm sao ạ ?:(
bạn đọc lại bài của bạn Trần Quang Vũ, trong đó đã có câu trả lời cho bạn rồi.