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

Đâ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.

Leave a Reply

30 Comments on "Nhận biết thiết bị di động"

Notify of
avatar
Sort by:   newest | oldest | most voted
Joomla Basic
Guest

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
Guest

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
Guest
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… Read more »
Sáu
Guest
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ó… Read more »
Minh Nhựt
Guest

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
Guest

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

Quách Minh Tính
Guest
Đọ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… Read more »
hong ngoc
Guest

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
Guest

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 hangcucre68@gmail.com của mình nhé

Trankhuyen
Guest

Ú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
Guest

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
Guest

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
Guest

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

Đại
Guest

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 hangcucre68@gmail.com mình cho code nhé

Đại
Guest

Mot doan 6 dong ngan la ok

Thanh Phuong
Guest

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

Linh Đan
Guest

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

wpDiscuz