Check if the user is browsing using mobile

I am building a website on wordpress, the theme I’m using support the desktop and mobile. So the website change based on what the user is using. Anyway, I am trying to determined if the user is using mobile when browsing the website, based on what I have search so far,

echo $_SERVER['HTTP_USER_AGENT'];

This determined the information of something I’m not sure of. When I opened the header.php of my theme file. I did tried to removed these lines, and browse the website on mobile, the website did not appear as a mobile, it appear a FULL VIEW WEBSITE just like on a desktop, and that is the output I’m trying to work on.

Read More
 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

The problem now is how can I determine if the user is on mobile or not? Any idea on this?

Related posts

Leave a Reply

3 comments

  1. WordPress uses the wp_is_mobile function to check a mobile device. It doesn’t check what device is being used but the user agent can send some basic information to your site. WP docs: http://codex.wordpress.org/Function_Reference/wp_is_mobile

    To get a “full view” version of your website there are two methods to achieve this… clever ways that don’t need you to have two copies of your website on different suddomains.

    1. Using the wp_is_mobile function you could use this to dynamically put a link on your site to the “Desktop version” – using the wp_is_mobile function to your advantage you could have it only add the “Desktop version” link if someone is using the mobile version of your site. -> You could then have a link with a $_GET variable that you use in your header.php to not echo the browser meta (you know when you removed the meta data and you got the full site on a phone?) so you should then have the ability to view the full site on a mobile.
    2. Have a permanent link on your site to your “Desktop version” that contains a $_GET variable that you can feed into your header.php to not echo out the meta tag to change the site for mobile versions.

    The problem with a more “dynamic” method (as above) is that your CSS media queries will override and possibly cause you problems. An alternative is to host a copy of your site on a subdomain that hasn’t got any responsive CSS…

  2. what are you exactly trying to achieve? Is it that smaller resolutions get an adapted website? If so test for the resolution.
    If you are trying to adapt your website when certain capabilities are missing (flash, javascript, …) then you should test those.
    Nowadays you can get Android on a laptop and you can change your browseragent on some android phones.

  3. depends on how custom you want to go, but php has a built in function called get_browser()

    from the php white pages,

    <?php
    $browser = get_browser(null, true);
    print_r($browser);
    ?>
    

    will output something similar to

    Array
    (
        [browser_name_regex] => ^mozilla/5.0 (windows; .; windows nt 5.1; .*rv:.*) gecko/.* firefox/0.9.*$
        [browser_name_pattern] => Mozilla/5.0 (Windows; ?; Windows NT 5.1; *rv:*) Gecko/* Firefox/0.9*
        [parent] => Firefox 0.9
        [platform] => WinXP
        [browser] => Firefox
        [version] => 0.9
        [majorver] => 0
        [minorver] => 9
        [cssversion] => 2
        [frames] => 1
        [iframes] => 1
        [tables] => 1
        [cookies] => 1
        [backgroundsounds] =>
        [vbscript] =>
        [javascript] => 1
        [javaapplets] => 1
        [activexcontrols] =>
        [cdf] =>
        [aol] =>
        [beta] => 1
        [win16] =>
        [crawler] =>
        [stripper] =>
        [wap] =>
        [netclr] =>
    )
    

    you can then make all sorts of design decisions based on that data. specifically the [platform] and [browser] for your task