Article | Date posted : 7 June, 2013 | Updated on : 15 January, 2014

PHP, CSS and jQuery Mobile Detection Setup

Sponsored Links

With the rise of smartphones and tablets a mobile site is a must, it is time to start thinking about developing a site for all devices be it Desktop, Tablet or Smartphone.

I have built an e-commerce website ( using a technique I will explain below which uses a combination of PHP, CSS media queries and jQuery.

Step one upload a copy of Mobile_Detect.php to your server, if you like the script please donate the guys, it’s a great plugin.

Step two include the settings file, I always use include with server root so that I don’t have to change the path depending on the page location. With some servers you may need to add a forward slash before the file name. Easy to test out.

In the setting file I have included the mobile detect file and added some other useful functions which I will explain below.

Breaking down settings.php.

When building websites I always set up a URL variable, because I prefer to have true URLs rather than using ../folder to root the source, this is so that each index file can be in any folder without extra modification. And also if you have a beta sub-domain you can change the $site variable in one file to another for site wide change. Even if you have SSL on the main site but not on the sub domain, you can then just set a non https URL. The variables I have set are $site, $siteS, $root

All the CSS and jQuery files have a query version added to the URL, this to make sure that every user viewing your site is always forced to use the latest version, so with every version just change the $v to a new number. This method will result in an always up to date site. I must add that Google prefers you to have static style-sheets rather than dynamic one. As far as I know this will not influence your SEO.

Example of dynamic stylesheet below.

We then require the Mobile_Detect.php, and establish the function

I also separated my image folders into a desktop and mobile version, the mobile version is then optimized having smaller and lighter images.

Now settings.php has been created, we start including the CSS files. We only want to load a CSS file for the correct device. Which we place in-between the start of the and the end of the .

We will use headLinkScript.php as an example, the following would be inserted in the file and then included into your index file. We will ask if the $mobile is equal to 1 which means that it is a mobile device (a tablet or smart phone) In my testing I have not used MobileDetect to see if it’s a Tablet or Smartphone as it is not covering all the possible devices, although they are constantly adding new devices. Simply relying on server-side scripting for responsive sites is not good enough. So I define it by CSS media queries, a small style for smaller device mostly Smart Phones and then a large style which is mostly for Tablets.

If then it’s not a mobile device it would use the desktop styling.

You do the same for your javascript files.

Sponsored Links


Leave a Reply

Your email address will not be published. Required fields are marked *

Follow me on Google+

Google Shopping Data Feed Generator

Sponsored Links

Hire Me