What is a good way to switch between your mobile site and your regular site? Below is a PHP class that you can add to your regular site which will examine the HTTP_USER_AGENT, HTTP_ACCEPT, HTTP_X_WAP_PROFILE and HTTP_PROFILE to determine your browser profile.
“Mobile_Detect is a simple PHP class for easy detection of the most popular mobile devices platforms: Android, Blackberry, Opera Mini, Palm, Windows Mobile, as well as generic ones.”
In PHP the values of the HTTP headers are stored in the $_SERVER array.
$accept = $_SERVER["HTTP_ACCEPT"];
$user_agent = $_SERVER["HTTP_USER_AGENT"];
$accept_charset = $_SERVER["HTTP_ACCEPT_CHARSET"];
$accept_language = $_SERVER["HTTP_ACCEPT_LANGUAGE"];
$x_wap_profile = $_SERVER["HTTP_X_WAP_PROFILE"];
$profile = $_SERVER["HTTP_PROFILE"];
On my Android Evo, these produce the following values:
HTTP_USER_AGENT: Mozilla/5.0 (Linux; U; Android 2.2; en-us; Sprint APA9292KT Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
HTTP_ACCEPT_CHARSET: utf-8, iso-8859-1, utf-16, *;q=0.7n\HTTP_ACCEPT_LANGUAGE: en-US
The HTTP_X_WAP_PROFILE value is often a link to the rdf xml description of the device, the UAProf (User agent profile). If you view the source of this file you will see the device specifics such as the screen size 480×800 in a tag named prf:ScreenSize.
What does this mean for a developer? If you are using a platform such as jQuery Mobile, you can let the platform decode the device specifics and set up the capabilities of the device such as min and max screen height and width, whether you are in portrait or landscape mode and so on.
And that is a topic for the next post.