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.

Gửi bình luận của bạn 30 bình luận

    • Trong bài viết mình đã có đính kèm ví dụ cách sử dụng của Mobile Detect rồi. Bạn có thể sử dụng bằng cách khi viết giao diện cho WordPress, sử dụng Mobile Detect để thêm CSS khác nhau cho từng trường hợp.

      Hoặc bạn cũng có thể sử dụng cái này để tùy chọn hiển thị các template khác nhau. Ví dụ bạn muốn hiển thị phần header của thiết bị di động khác với máy tính thì dùng như sau:

      if( $detect->isMobile() && !$detect->isTablet() )
      {
      	include('file-header-mobile.php');
      }
      else
      {
      	include('file-header-pc.php');
      }
      

      Và đoạn code trên bạn bỏ vào tập tin header.php của giao diện.

  1. 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 trên đt bị chậm khá nhiều.

    • 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ó thể lượt bỏ bớt nhiều thứ không cần thiết để trang có tốc độ tải nhanh hơn…

  2. Đọ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 tiếp theo là:
    Phương án 1: trong trang web chính của mình tạo 2 file CSS, 1 cho TBDĐ và 1 cho PC, khi người truy cập vào nó sẽ nhận diện và load file CSS đó lên và tạo nên giao diện phù hợp.
    Phương án 2: là website của mình tạo 2 trang riêng biệt, trangchinh.com và trangphu.com, khi người dùng truy cập vào nó sẽ nhận diện, nếu là PC thì load trangchinh.com ngược lại load trangphu.com

    Mình chỉ suy nghĩ đc 2 phương án như vậy Sáu có cách nào khác hay hơn mách cho mình với. Và thực sự cả tuần nay mình mài mò mà vẫn chưa tìm ra được code để kiểm tra người dùng truy cập web là TBDĐ hay là PC nữa. Mình đã test nhiều đoạn code trên nhiều diễn đàn nhưng vẫn báo lỗi và chữa rõ ràng. Sáu có code nào kiểm tra thì cho mình xin với nhe Sáu.

    Điện thoại của mình là: 0918 234 290 YH:quachminhtinh
    Rất mong nhận được sự trợ giúp của Sáu và bạn bè trên diễn đàn, mình rất cám ơn và có hậu tạ hihi!

    • Chào bạn, không biết bạn đang dùng mã nguồn gì?

      Bạn có thể tạo ra 2 tập tin css khác nhau để load cho TBDĐ và computer, điều này sẽ đơn giản hơn nhiều so với việc bạn tạo ra 2 tên miền khác nhau.

      Nếu chỉ khác nhau về mặt hiển thị thì bạn nên áp dụng khả năng responsive cho giao diện trang web của bạn.

      • 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ụ:

        $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 www.xyz.com
            }
        

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

  3. 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.

  4. 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’)

  5. 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

Gửi bình luận

Địa chỉ email của bạn sẽ được giữ bí mật. Những mục bắt buộc được đánh dấu *