ตรวจสอบมือถือ โดยใช้ mobile-detect.js

มีโจทย์คือ เว็บเราอยาก ทำปุ่มโทรออกจากเว็บ โดยให้ show ปุ่มเฉพาะเปิดเว็บจากบนมือถือจริงๆ เท่านั้น

ผมใช้ mobile-detect.js ในการตรวจสอบว่าเป็น mobile จริง ถึงจะ show ปุ่มโทรออก

install

เพิ่ม Script ลงในไฟล์ที่ต้องการ

<script src="//cdn.jsdelivr.net/mobile-detect.js/1.3.6/mobile-detect.min.js"></script>

1	<script src="//cdn.jsdelivr.net/mobile-detect.js/1.3.6/mobile-detect.min.js"></script>

การใช้งาน

 var md = new MobileDetect(window.navigator.userAgent);

 var mobile = md.mobile() ;  //detected phone or tablet type 
 var phone = md.phone() ;    //detected phone type
 var tablet = md.tablet() ;  //detected tablet type
 var userAgent = md.userAgent() ; //detected user-agent
 var os = md.os() ; //detected operating system
 var isIphone = md.is('iPhone') ; //ใช่ iPhone ?
 var isBot = md.is('bot') ;  // ใช่ bot ?
 var webkit = md.version('Webkit') ; 
 var versionBuild = md.versionStr('Build') ;
 var isMatch = md.match('playstation|xbox') ;

var md = new MobileDetect(window.navigator.userAgent);

var mobile = md.mobile() ; //detected phone or tablet type

var phone = md.phone() ; //detected phone type

var tablet = md.tablet() ; //detected tablet type

var userAgent = md.userAgent() ; //detected user-agent

var os = md.os() ; //detected operating system

var isIphone = md.is('iPhone') ; //ใช่ iPhone ?

var isBot = md.is('bot') ; // ใช่ bot ?

var webkit = md.version('Webkit') ;

var versionBuild = md.versionStr('Build') ;

var isMatch = md.match('playstation|xbox') ;

อ่านเพิ่ม Doc MobileDetect

code เต็มๆครับ

<script src="//cdn.jsdelivr.net/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/mobile-detect.js/1.3.6/mobile-detect.min.js"></script>

<script>
  $(document).ready(function () {
        var md = new MobileDetect(window.navigator.userAgent);
       
		var mobile = md.mobile() ;
		var phone = md.phone() ;
		var tablet = md.tablet() ;
		var userAgent = md.userAgent() ;
		var os = md.os() ;
		var isIphone = md.is('iPhone') ;
		var isBot = md.is('bot') ;
		var webkit = md.version('Webkit') ;
		var versionBuild = md.versionStr('Build') ;
		var isMatch = md.match('playstation|xbox') ;

		var text_info = 'mobile: '+mobile +'<br>'+
                        'phone: '+phone +'<br>'+
                        'tablet: '+tablet +'<br>'+
                        'userAgent: '+userAgent +'<br>'+
                        'os: '+os +'<br>'+
                        'isIphone: '+isIphone +'<br>'+
                        'isBot: '+isBot +'<br>'+
                        'webkit: '+webkit +'<br>'+
                        'versionBuild: '+versionBuild +'<br>'+
                        'isMatch: '+isMatch +'<br>';        
         
		$('#device_info').html(text_info);

		var call_text ;
		if (md.mobile()) {
		   call_text =	'<a href="tel:088-8588-388"><img src="img/icon_phone_call.png" width="128px" height="128px" '+
			' "cursor: pointer;"></a>' ;   	
		}else{
           call_text ='no call';	
		}
		$('#call_info').html(call_text);
  }	);
</script>

<div id="call_info"></div>
<hr>
<div id="device_info"></div>

$(document).ready(function () {

var md = new MobileDetect(window.navigator.userAgent);

var mobile = md.mobile() ;

var phone = md.phone() ;

var tablet = md.tablet() ;

var userAgent = md.userAgent() ;

var os = md.os() ;

var isIphone = md.is('iPhone') ;

var isBot = md.is('bot') ;

var webkit = md.version('Webkit') ;

var versionBuild = md.versionStr('Build') ;

var isMatch = md.match('playstation|xbox') ;

var text_info = 'mobile: '+mobile +'<br>'+

'phone: '+phone +'<br>'+

'tablet: '+tablet +'<br>'+

'userAgent: '+userAgent +'<br>'+

'os: '+os +'<br>'+

'isIphone: '+isIphone +'<br>'+

'isBot: '+isBot +'<br>'+

'webkit: '+webkit +'<br>'+

'versionBuild: '+versionBuild +'<br>'+

'isMatch: '+isMatch +'<br>';

$('#device_info').html(text_info);

var call_text ;

if (md.mobile()) {

call_text = '<a href="tel:088-8588-388"><img src="img/icon_phone_call.png" width="128px" height="128px" '+

' "cursor: pointer;"></a>' ;

}else{

call_text ='no call';

}

$('#call_info').html(call_text);

} );

</script>

<hr>

ลองเข้าดูครับ demo mobile detect

Post Views: 3,177

Share5

5 Shares

Chaichon Dev Log

just develop, Stay Hungry, Stay Foolish

ตรวจสอบเครื่องที่เปิด web เป็นมือถือจริงๆ โดยใช้ mobile-detect.js

install

การใช้งาน