Nhận biết thiết bị di động

Cập nhật lần cuối vào

Đây là bài viết đầu tiên Sáu viết mà có nội dung liên quan đến lập trình web, hôm nay Sáu sẽ giới thiệu đến bạn một bộ mã nguồn với công dụng là nhận biết các thiết bị di động bao gồm điện thoại di động và máy tính bảng.

Mobile Detect PHP

Mobile Detect là bộ code PHP hoàn toàn miễn phí, bạn có thể sử dụng cho bất kỳ dự án website nào bạn muốn. Cách sử dụng bộ code này cũng cực kỳ đơn giản, bên dưới là một số ví dụ cho bạn tham khảo khi tích hợp Mobile Detect vào dự án web của mình.

// Include and instantiate the class.
require_once 'Mobile_Detect.php';
$detect = new Mobile_Detect;
// Any mobile device (phones or tablets).
if ( $detect->isMobile() ) {
}
// Any tablet device.
if( $detect->isTablet() ){
}
// Exclude tablets.
if( $detect->isMobile() && !$detect->isTablet() ){
}
// Check for a specific platform with the help of the magic methods:
if( $detect->isiOS() ){
}
if( $detect->isAndroidOS() ){
}
// Alternative method is() for checking specific properties.
// WARNING: this method is in BETA, some keyword properties will change in the future.
$detect->is('Chrome');
$detect->is('iOS');
$detect->is('UC Browser');
// [...]
// Batch mode using setUserAgent():
$userAgents = array(
    'Mozilla/5.0 (Linux; Android 4.0.4; Desire HD Build/IMM76D) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.166 Mobile Safari/535.19',
    'BlackBerry7100i/4.1.0 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/103',
// [...]
);
foreach($userAgents as $userAgent){
    $detect->setUserAgent($userAgent);
    $isMobile = $detect->isMobile();
    $isTablet = $detect->isTablet();
// Use the force however you want.
}
// Get the version() of components.
// WARNING: this method is in BETA, some keyword properties will change in the future.
$detect->version('iPad'); // 4.3 (float)
$detect->version('iPhone'); // 3.1 (float)
$detect->version('Android'); // 2.1 (float)
$detect->version('Opera Mini'); // 5.0 (float)
// [...] 

Với Mobile Detect bạn có thể nhận biết được người dùng đang sử dụng điện thoại di động hoặc máy tính bảng. Thậm chí bạn còn có thể biết được cụ thể là người dùng đang sử dụng điện thoại đang chạy hệ điều hành gì, hãng nào sản xuất và đang duyệt web bằng trình duyệt nào.

Demo

Công cụ này sẽ rất hữu ích nếu bạn muốn thiết kế giao diện web hiển thị khác nhau khi người dùng truy cập từ máy tính, điện thoại hoặc máy tính bảng. Bạn có thể sử dụng lại code này mà không cần phải bỏ ra nhiều thời gian để tự viết code bởi nó đang được tin dùng từ rất nhiều người.

Theo dõi
Thông báo của
guest

30 Comments
Cũ nhất
Mới nhất Được bỏ phiếu nhiều nhất
Phản hồi nội tuyến
Xem tất cả bình luận
Joomla Basic
10 năm trước

Chào admin,

Bài viết bạn giới thiệu rất hay, nhưng có thể viết cụ thể hơn để áp dụng vào WP hay không. Mình trước giờ thì dùng Joomla chuyển qua WP thì thấy hơi rối ad ạ. Cảm ơn ad trước.

Minh Nhựt
10 năm trước

Thư viện này hay phết, thanks bác đã chia sẻ. Clone thư viện này về Github của mình để từ từ nghiên cứu thêm mới được.

Minh Nhựt
10 năm trước

Nhận diện tốt cái Safari trên ios 3.1. Bác fix luôn cái hiển thị code đi bác. Chiều rộng của Code lúc hiển thị trên đt vượt quá kích thước, làm không thấy code nữa. https://db.tt/QQMbTdx4 Mà làm như vầy tốt, hay dùng giao diện responsive tốt đây bác nhỉ. Bắt đầu thấy bối rối. Đang sử dụng theme responsive, nhưng không hiệu quả bằng cách của bác. Vì sự thực thì Responsive chỉ giải quyết vụ hiển thị cho đẹp trên mọi thiết bị, chứ nó vẫn phải tải hết các tài nguyên của web về. Nên truy cập… Đọc tiếp »

Sáu
Sáu
10 năm trước
Trả lời  Minh Nhựt

Mình đang dùng Chrome trên Android thấy rất ok. Cái code có thể kéo qua để xem. Riêng phần responsive với cách này thì mình cũng không khẳng định được cách nào hay hơn. Mình thấy cách dùng bộ code này thì cũng có cái tiện mà cũng có cái khó. Tiện là mình tự thích làm lại code, mình có thể chỉnh sửa tùy chọn cho hiển thị trên thiết bị di động. Nhưng vì thế mà phải viết lại code riêng, cũng giống như sử dụng 2 giao diện hoàn toàn khác nhau. Trên di động thì có… Đọc tiếp »

Minh Nhựt
10 năm trước
Trả lời  Sáu

Của mình kéo không được rồi, chắc do phiên bản ios cũ, trình duyệt cũng chưa update. Code bên trang mình, mình tự mở lên xem cũng không kéo được. Của bác dùng plugin hay thư viện javascript nào để style cho code vậy.

Game online cho dt
10 năm trước

Cam on admin da chia se bai viet nay!
Bai viet rat hay va bo ich!

Quách Minh Tính
Quách Minh Tính
9 năm trước

Đọc được bài viết này của Sáu mình rất mừng, mình cũng đang tìm hiểu về vấn đề phát triển website trên Thiết bị di động, mà tìm bài viết còn ít quá. Sáu giải thích dùm mình vài rút mắc chưa đc rõ nhe Sáu. Bây giờ mình phát triển 1 trang web trên PC và laptop và muốn nó chạy tốt luôn trên Thiết bị di động nói chung. Ví dụ, khi có người truy cập vào mình đã phân biệt được đó là Thiết bị di động nói chung(TBDĐ) hay là PC, laptop(PC) rồi nhe. Công việc… Đọc tiếp »

Quách Minh Tính
Quách Minh Tính
9 năm trước

Mình dùng mã nguồn mở PHP Sáu ơi. Sáu có thể cho mình đoạn code PHP để nhận diện PC và TBDĐ được không? Mình test vài đoạn code rùi mà ko thấy hiệu quả như mong muốn. Ví dụ:

[php]
$useragent=$_SERVER[‘HTTP_USER_AGENT’];
if(preg_match(‘/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i’,$useragent)||preg_match(‘/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i’,substr($useragent,0,4))){
header ("Location: http://m.xyz.com"); // this will redirects to m.xyz.com
}
else
{
header ("Location: http://www.xyz.com"); // this will redirects to http://www.xyz.com
}
[/php]

Rất mong đc sự trợ giúp của Sáu, mình đang quay sang nghiên cứu responsive.

Quách Minh Tính
Quách Minh Tính
9 năm trước

Sáu ơi, Sáu cho mình xin số phone được không? Mình sẽ liên hệ lại với Sáu.

hong ngoc
9 năm trước

Em đang làm website bằng wordpress thiết kế theo theme riêng của mình, mà em muốn website mình vừa chạy tốt trên PC vừa chạy được trên thiết bị di động mà không bị lỗi về giao diện.

Vậy chỉ em 1 vài kỹ thuật code css cho web chạy được trên các thiết bị trên.

Đinh Văn Đại
Đinh Văn Đại
8 năm trước
Trả lời  hong ngoc

Bạn có thể tham khảo trang hangcucre.vn
cần code thì mình có thể share cho bạn liên hệ qua mail [email protected] của mình nhé

Trankhuyen
9 năm trước

ÚI nhìn mà hoa hết cả mắt lên, mình đang cần tìm kiếm code nhận dạng thiết bị di động, thanks all

Việt Phan
9 năm trước

ui cảm ơn a nhiều lắm, đang cần tìm cái này vì trên di động mấy cái iframe k hiển thị được

Việt Phan
9 năm trước

cảm ơn anh, bài viết rất hay, em đã làm thử tuy nhiên hình như cái $detect->isMobile() chỉ đúng với Safari còn Opera mini thì ko được, anh có thể cho em code cụ thể nếu muốn áp dụng riêng với Operamini được không? kiểu giống cái này này nhưng mà là Opera mini: $detect->is(‘UC Browser’)

hoàng
hoàng
9 năm trước

Hi, Sáu, bạn cho mình hỏi cái này để làm site cho mobile dạng m.tendomain.com giống m.dantri.com.vn. Mình hỏi một số bạn thì lại kêu xài file .htaccess để chuyển hướng. Mình đang bị loạn hết cả lên :v. Mình cám ơn bạn nhiều

hoangnk1988
hoangnk1988
9 năm trước

Hi Sáu, có nghĩa là bây giờ mình xài cái mobile detect bạn giới thiệu ở trên thì không cần phải dùng subdomain và file .htaccess đúng không? Mình gà cái món này quá.

Đại
Đại
8 năm trước
Trả lời  hoàng

Ko cần m.domain.com như dân trí đâu bạn. No sẽ tự tìm đến thư muc đâu la moblie. Đâu la smartphone va đâu là desktop. Bạn co thể review hangcucre.vn trên mobile va desktop. Co the spam inbox [email protected] mình cho code nhé

Đại
Đại
8 năm trước
Trả lời  hoàng

Mot doan 6 dong ngan la ok

Thanh Phuong
Thanh Phuong
9 năm trước

Thank Sáu, rất hay và dễ hiểu.

Linh Đan
7 năm trước

Cám ơn bạn đã chia sẻ bài viết rất hữu ích.