Đâ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 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.
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.
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.
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: [php] if( $detect->isMobile() && !$detect->isTablet() ) { include(‘file-header-mobile.php’); } else { include(‘file-header-pc.php’); } [/php] Và đoạn code trên… Đọc tiếp »
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.
Bác N thử truy cập vào Blog Học WordPress từ mobile xem nào. Giao diện mobile Sáu sử dụng đơn giản với gói mã nguồn này đấy.
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 »
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 »
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.
Tớ dùng dịch vụ của GitHub để lưu trữ code, sau đó embed vào bài viết á.
https://gist.github.com/
Muốn hiển thị đẹp thì chỉnh sửa lại xíu css nữa là ok.
Cam on admin da chia se bai viet nay!
Bai viet rat hay va bo ich!
Đọ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 »
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ụ:
[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.
Trời, chi mà tùm lum vậy, bạn đọc lại bài viết này nhé. Mình đã có hướng dẫn bên trên rồi mà.
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.
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.
Hiện Học WordPress chưa có bài hướng dẫn thiết kế giao diện responsive, bạn tìm hiểu thêm trên Google nhé.
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é
Ú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
Rất vui vì đã giúp được bạn.
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
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’)
Dùng cái này nhé: isUCBrowser() hoặc xem thêm: http://demo.mobiledetect.net/
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
Mình nghĩ bạn nên dùng giao diện responsive tương thích với mobile thay vì dùng subdomain. Hoặc có thể viết giao diện với mỗi tập tin bạn phân làm 2, nếu là mobile thì load tập tin cho mobile.
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á.
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é
Mot doan 6 dong ngan la ok
Cập nhật cho bạn nhé, bạn có thể xem thông tin bài viết mình đăng bổ sung:
https://hocwp.net/guide/tao-ten-mien-mobile-m-domain-com-cho-wordpress/
Thank Sáu, rất hay và dễ hiểu.
Cám ơn bạn đã chia sẻ bài viết rất hữu ích.