pCloud Premium

Website Mobile version - how to detect mobile phone

уеб дизайн web дизайн Как да засечем посещение от Мобилен телефон

Mobile devices are becoming literally personal computers in you pocket. So-called smartphones are increasingly circling in the web. But the price of the mobile Internet can not be compared with that from home, still traffic costs money. That's one of the reasons why it is good idea to create a lightweight and optimized version of your website. But how to detect visits from phones so to make the redirection? Let's see...


The first step is to download the file Mobile_Detect.php (from the end of this article) and paste it in the root (main) directory your site. Then you must add some code into the index.php of your template. If your website is entirely made of html, simply change the extension from index.html to index.php Now add the following code in the header. The code must be the first thing to load in the site. Thats why we'll put it immediately after the opening <head> tag.

  1. <?php
  2. session_start();
  3. include("Mobile_Detect.php"); // From here, we load the file Mobile_Detect.php
  4. $mobile_detect = new Mobile_Detect();
  5. if (isset($_GET['ua']) && $_GET['ua']==1){
  6. $_SESSION['sitemode'] = 1;
  7. }elseif (isset($_GET['ua']) && $_GET['ua']==0){
  8. unset($_SESSION['sitemode']);
  9. }
  10. if ($mobile_detect->isMobile() && !isset($_SESSION['sitemode'])) {
  11. header('Location:'); // From here we redirect the mobile devices to a new location
  12. // We also could redirect them to a file in the same directory: header('Location: mobile.index.php');
  13. }
  14. ?>

We now successfully redirect mobile devices to the specified location. Not everyone, however, will prefer to browse the mobile version of your website. That's why it's good idea to add a button that'll returned the users in the desktop version. Make sure that you add a ?ua=1 in the end of the link so to be ensure that session will keep the users in the desktop version and not get automatically redirected back to the mobile one. <a href="/">Desktop version of the web site</a>

When you create the mobile version of your website it's good to do it with a simple and clean web design. Stick to the original design, but with minimal use of heavy graphics and scripts.

Code with percentage widths and heights, because the resolutions are different, especially with the advent of the new tablets. However, note that the most common width resolutions are 240 or 320px (Iphone).

It is recommended to create the mobile version of your web site in a new domain with name of the type "mobile". So you can register in mobile search engines. It will also give a direct message for the users that they are located in the mobile version of the website.

Check your web site in to see if you made any technical errors and to get advised on how to optimize your site.

If you have any suggestions to add to this article, please leave a comment.

I hope this tutorial was useful. ico

Download archive2 KBDownloaded 250 times
20 April 2012г.
Viewed 15978 times