Views 3720 Votes 0 Comment 0
Atachment
Attachment '1'
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print
?

Shortcut

PrevPrev Article

NextNext Article

Larger Font Smaller Font Up Down Go comment Print


SOURCE CODE DOWNLOAD

Click here to download all the example source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

QUICK START

  • Download and unzip into a folder.
  • Hooray! There is no database involved, so just follow through each of the files contained within.
  • But take note that the zip file does not contain a copy of the Mobile Detect library. Please download the Mobile Detect library from their website, or pull it directly into your project folder using Composer with composer require mobiledetect/mobiledetectlib.

 

METHOD 1
THE USER-AGENT

This first method that we will touch on involves reading information from the HTTP user-agent, which is also pretty much the backbone behind all of the other methods.

 

WHAT IS THE USER AGENT?

Let me just do a quick quote from Mozilla developer:

The User-Agent request header contains a characteristic string that allows the network protocol peers to identify the application type, operating system, software vendor or software version of the requesting software user agent.

In the more layman terms, the HTTP user-agent is “invisible information” that a web browser sends to the web server when requesting for a web page – We, the web developers can then use this information to determine what kind of technology the user has, and serve our webpages accordingly.

 

WHAT INFORMATION IS IN THE USER AGENT?

Quoting from good old Mozilla again, here is how a typical user-agent is formatted:

User-Agent: Mozilla/<version> (<system-information>) <platform> (<platform-details>) <extensions>

A more realistic example from my very own computer:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.119 Safari/537.36

If you are interested, you can also check your own user-agent at whatismybrowser.com, and here are the more relevant examples of mobile agents:

Some of you sharp code ninja should have already figured out how we can determine if the user is on a mobile or desktop device now – The hardware type of mobile devices almost always reports as MobileMobile – Phone, or Mobile – Tablet.

 

DETECTION WITH USER-AGENT

The user-agent can be accessed from the $_SERVER['HTTP_USER_AGENT'] global variable – PHP server variable, and we can use it to detect the platform.

1-user-agent.php
<?php
function isMobile () {
  return is_numeric(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "mobile"));
}

echo isMobile() ? "You are using a mobile device." : "You are on a desktop or laptop." ;
/* If you are redirecting the user to a mobile page, it is as simple as
if (isMobile()) {
  header("Location: http://mobile.yoursite.com/");
} */
?>

It’s that simple – As long as the user-agent string contains the word “mobile”, we will consider that the user is on a mobile device.


METHOD 2
MOBILE, TABLET, OR DESKTOP

Now that you know the basics of HTTP user-agent, this second method is kind of an “alternative” and improvement – So what if you want to further differentiate between mobile, tablet, and desktop?

 

MORE CHECKS

2-more.php
<?php
function checkDevice() {
// checkDevice() : checks if user device is phone, tablet, or desktop
// RETURNS 0 for desktop, 1 for mobile, 2 for tablets

  if (is_numeric(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "mobile"))) {
    return is_numeric(strpos(strtolower($_SERVER['HTTP_USER_AGENT']), "tablet")) ? 2 : 1 ;
  } else {
    return 0;
  }
}

$deviceType = checkDevice();
if ($deviceType==0) {
  echo "DESKTOP";
} else if ($deviceType==1) {
  echo "PHONE OR MOBILE";
} else {
  echo "TABLET";
}
?>

Yep, we simply add another layer of check to our earlier function, and this will further filter out the tablets.

METHOD 3
MOBILE DETECTION LIBRARY

Finally, for you guys who are looking for very detailed checks, I will suggest using a library called Mobile Detect instead.

 

GETTING THE MOBILE DETECT LIBRARY

You can download the Mobile Detect library from their website, or pull it directly into your project folder using Composer with composer require mobiledetect/mobiledetectlib:

D:\http\test>composer require mobiledetect/mobiledetectlib
Using version ^2.8 for mobiledetect/mobiledetectlib
./composer.json has been updated
Loading composer repositories with package information
Updating dependencies (including require-dev)
Package operations: 1 install, 0 updates, 0 removals
  - Installing mobiledetect/mobiledetectlib (2.8.33): Downloading (100%)
Writing lock file
Generating autoload files

 

THE MOBILE DETECT SCRIPT

Once you have downloaded the mobile detect script, all that is left is to use it:

3-lib.php
<?php
// INCLUDE MOBILE DETECT LIBRARY
require "mobile-detect/Mobile_Detect.php";
$detect = new Mobile_Detect;

// DETECTION ENGINE
if ($detect->isMobile() || $detect->isTablet()) {
  echo "MOBILE OR TABLET DEVICE";
  if( $detect->isiOS() ){
    echo "IOS";
  }
  if( $detect->isAndroidOS() ){
    echo "ANDROID";
  }
} else {
  echo "DESKTOP";
}

// There are plenty more, and you check it out here -
// http://demo.mobiledetect.net/
?>

 

EXTRA
LIMITATIONS & USEFUL BITS

That’s all for the code of this tutorial, and here is a small section on some extras that may be useful to you.

 

WHICH IS THE BEST?

Personally, I prefer the first lightweight solution – Clean, simple, fast, and it is good enough to cover most cases. But if you really have to dig in deep and separate your users down to the brand or browser… Then it is a good time to reconsider how you are approaching your project design.

 

THE LIMITATIONS

We can only get so much information out of the user agent. Please also take note that the detection is not going to be 100% accurate, as changes will occur over time – We literally have folding smartphones that are in-between a tablet and phone, also tablets that act as laptops… So which is which? You decide.

P.S. The advanced users can also choose to disable the user agent, and this detection feature is going to fail.

 

ALTERNATIVE – RESPONSIVE DESIGN

Sometimes, all it takes is to just adopt a responsive design and change the HTML/CSS. Yep, if the design is your only concern, then is it really worth the time and money to develop another dedicated mobile site? You decide.


[출처] https://code-boxx.com/detect-mobile-desktop-in-php


?

List of Articles
No. Category Subject Author Date Views
825 Develop SVN 초간단 사용하기 hooni 2014.02.28 7618
824 Develop URI 인코딩, URL 인코딩 file hooni 2013.04.23 18845
823 Develop What is difference between Get, Post, Put and Delete? hooni 2018.02.28 1400
822 Develop XE Core 1.8.18 본문 작성시 태그(html) 사라지는 버그 file hooni 2016.04.21 864
821 Develop XML, JSON, BSON, MSGPACK 장,단점 비교 file hooni 2017.01.11 2239
820 Develop ZBar 라이브러리를 이용한 바코드 스캔 앱 개발하기 file hooni 2015.01.01 1628
819 Develop [ajax] 샘플 코드와 한글처리에 대한 간단한 설명 hooni 2013.04.23 6842
818 Develop [ajax] 이벤트 코드 생성기 작업중.. ㅋㅋ file hooni 2013.04.23 7116
817 Develop [Android Error] The number of method references in a .dex file cannot exceed 64K hooni 2016.11.10 754
816 Develop [Android] 2010년에 만들었던 세미나 자료. file hooni 2013.05.28 64661
815 Develop [android] AlertDialog 메시지 창 띄우기 hooni 2015.07.09 849
814 Develop [android] Android N requires the IDE to be running with Java 1.8 or later 오류 hooni 2016.08.30 684
813 Develop [android] ArrayAdapter 테스트 파일 ㅎㅎ hooni 2013.04.23 45241
812 Develop [android] ArrayAdapter를 이용하여 출력하기 hooni 2013.04.23 47339
811 Develop [android] Calling activity function from separate class hooni 2016.11.15 1155
810 Develop [android] Canvas를 이용해 이미지 확대/축소 하기 hooni 2013.04.23 60741
Board Pagination Prev 1 2 3 4 5 ... 53 Next
/ 53