I wanted one of my web applications to have a different appearance on mobile phones and devices. I didn’t really want to set up an entirely different domain or use a sub domain particularly for mobile devices (like http://mobile.facebook.com). Instead I want to tackle the device inside my application logic so that all users access the same URL.

PHP’s $_SERVER['HTTP_USER_AGENT'] is cool. You can play around this variable and achieve what you want. But you don’t get all you want. Let’s look at the string output of the above variable on my browser:

Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.2.6) Gecko/20100625 Firefox/3.6.6 (.NET CLR 3.5.30729)

This gives you some information. I wanted an easy way to see whether the request was from a mobile device.

PHP has this function, get_browser which attempts to determine the capabilities of the user’s browser, by looking up the browser’s information in the browscap.ini file.

In order for this to work, your browscap configuration setting in php.ini must point to the correct location of the browscap.ini file on your system. browscap.ini is not bundled with PHP, but you may find an up-to-date » php_browscap.ini file here. While browscap.ini contains information on many browsers, it relies on user updates to keep the database current.

First, Download the browscap.ini file for PHP from the above website. There are many files and this is the one you need: Gary Keith’s browscap.ini for PHP

Now, open your PHP.ini file and find for “browscap”. You will see something like this:

[browscap]
;browscap = extras\browscap.ini

Remove the semicolon and change the path to point to the php_browscap.ini you just downloaded. Your PHP.ini directive now looks like this:

[browscap]
browscap = C:\Inetpub\PHP5\extras\php_browscap.ini

Save the PHP.ini file and restart your Web server.

Now use the get_browser function in your PHP code to get user’s browser properties and capabilities.

<?php
$browser = get_browser(null, true);
echo "<pre>";
print_r($browser);
echo "</pre>";
?>

This is the output I got when I accessed the script using a Computer Browser.

Array
(
    [browser_name_regex] => ^mozilla/5\.0 (windows; .*; windows nt 5\.1; .*; rv:1\.9\.2.*) gecko/.* firefox/3\.6.*$
    [browser_name_pattern] => Mozilla/5.0 (Windows; *; Windows NT 5.1; *; rv:1.9.2*) Gecko/* Firefox/3.6*
    [parent] => Firefox 3.6
    [platform] => WinXP
    [win32] => 1
    [browser] => Firefox
    [version] => 3.6
    [majorver] => 3
    [minorver] => 6
    [frames] => 1
    [iframes] => 1
    [tables] => 1
    [cookies] => 1
    [javaapplets] => 1
    1 => 1
    [cssversion] => 3
    [supportscss] => 1
    [alpha] =>
    [beta] =>
    [win16] =>
    [win64] =>
    [backgroundsounds] =>
    [cdf] =>
    [vbscript] =>
    [activexcontrols] =>
    [isbanned] =>
    [ismobiledevice] =>
    [issyndicationreader] =>
    [crawler] =>
    [aol] =>
    [aolversion] => 0
)

When I accessed the same script using a mobile phone, here’s what I got:

Array
(
    [browser_name_regex] => ^.*nokia.*/.*$
    [browser_name_pattern] => *Nokia*/*
    [parent] => Nokia
    [browser] => Nokia
    [tables] => 1
    [cookies] => 1
    [ismobiledevice] => 1
    [version] => 0
    [majorver] => 0
    [minorver] => 0
    [platform] => unknown
    [frames] =>
    [iframes] =>
    [javaapplets] =>
    1 =>
    [cssversion] => 0
    [supportscss] =>
    [alpha] =>
    [beta] =>
    [win16] =>
    [win64] =>
    [backgroundsounds] =>
    [cdf] =>
    [vbscript] =>
    [activexcontrols] =>
    [isbanned] =>
    [ismobiledevice] =>
    [issyndicationreader] =>
    [crawler] =>
    [aol] =>
    [aolversion] => 0
)

I was just looking at this,

[ismobiledevice] => 1
Interesting uh!

If your shared hosting service doesn’t allow you to modify the PHP.INI file, you would want to use a stand alone implementation of the same concept by Jonathan. http://code.google.com/p/phpbrowscap/

Combine all your Javascript files and CSS files in to one file each.
Normally we include multiple Script files in web pages. You can probably write a PHP script which accepts an array of names of all the script files to be included in the webpage which then fetches the content of the files and creates just one file and passes on to the browser. This doesn’t reduce the file size. The combined file size is not less than the sum of the sizes of the individual files. But it reduces the number of HTTP requests sent to your server.

Similarly you can combine all your icon/background images in to a single image and use CSS techniques like “background-position” to show different images at different places. Remember each image causes an HTTP request and you can reduce a lot of requests doing this way.

Use YUI Compressor to minify your Javascrip and CSS files.
When code is minified all comments are removed, as well as unneeded white space characters (space, newline, and tab). In the case of JavaScript, this improves response time performance because the size of the downloaded file is reduced.

Add Never Expires header for your Javascript and CSS files
You can use Apaches mod_expires module to set Cache-Control header for certain file types. You can configure your apache configuration to add statements like this,
ExpiresByType image/gif “access plus 1 months”
You can add Never expires header for your Javascript and CSS files. If you constantly make changes to your Script and CSS files you will have to rename the files every time you make changes.

Enable Compression
Enable compression using Gzip. 90% of the browsers support this. You can compress your text content, xml, script files etc but not images.

Stylesheets in your header
Make sure that your style sheets are inside the Head tag.

These are some simple things you can implement but will obviously enhance your website performance.

Good luck!

Developers can download program modules, source codes, solved problems and can ask questions on various technologies.

Ask a Question Now!