How to change web content based on operating system

Question

I am designing a wordpress website for mobile application. For the visitor, I want to display text, images based on operating system like the below page -

https://www.sapphireone.com/accounting-software/accounts/
In this page, in 'Accounts Structure section' there is a image that changes based on operating system , i.e. mac and windows.

I want to do similar thing for android and iPhone. I am using the following code, but it is not working.

//code for function.php

function find_andoird() {
$ua = $_SERVER[‘HTTPS_USER_AGENT’];

 /*    ====    Detect the OS    ====    */

 // Android
    $android        = strpos($ua, 'Android') ? true : false;

 // iPhone
   $iphone        = strpos($ua, 'iPhone') ? true : false;

  return $android;

 }

//Code for template file

if(find_andoird() == true) { 

<p><strong>Android View</strong></p>
<p>
<img src=“accounting-android.png”  style="float:left;width:400px;height:600px;">
The android view is displayed here.  
</p>
}  

else { 

<p><strong>iPhone View</strong></p>
<p>
<img src=“accounting-iphone.png” style="float:left;width:400px;height:600px;">
The iphone view is displayed here.  
</p>
}

}

Can I get some help please. Thanks

change the function to return $ua value, and output that to see the string the function is dealing with. — flauntster, Nov 25 '16 at 04:20
first it is `HTTP_USER_AGENT` and the quotes around it is wrong, should be simple quotes — bansi, Nov 25 '16 at 04:23
the first link for search `HTTPS_USER_AGENT` is [How to echo a different title to the page if it's opened on an android mobile phone](http://wordpress.stackexchange.com/questions/192242/how-to-echo-a-different-title-to-the-page-if-its-opened-on-an-android-mobile-ph) — bansi, Nov 25 '16 at 04:26
Hi bansi , I have changed to $ua = $_SERVER['HTTP_USER_AGENT']; still it is not working — Anis Rabbi, Nov 25 '16 at 04:32
hi flauntster, can you please help me , how to do that one .. since it is in wordpress thats why i am bit confused. — Anis Rabbi, Nov 25 '16 at 04:34

score 0 · Answer 1 · answered Nov 25 '16 at 04:38

This function might help.

<?php

$user_agent     =   $_SERVER['HTTP_USER_AGENT'];

function getOS() { 

    global $user_agent;

    $os_platform    =   "Unknown OS Platform";

    $os_array       =   array(
                            '/windows nt 6.2/i'     =>  'Windows 8',
                            '/windows nt 6.1/i'     =>  'Windows 7',
                            '/windows nt 6.0/i'     =>  'Windows Vista',
                            '/windows nt 5.2/i'     =>  'Windows Server 2003/XP x64',
                            '/windows nt 5.1/i'     =>  'Windows XP',
                            '/windows xp/i'         =>  'Windows XP',
                            '/windows nt 5.0/i'     =>  'Windows 2000',
                            '/windows me/i'         =>  'Windows ME',
                            '/win98/i'              =>  'Windows 98',
                            '/win95/i'              =>  'Windows 95',
                            '/win16/i'              =>  'Windows 3.11',
                            '/macintosh|mac os x/i' =>  'Mac OS X',
                            '/mac_powerpc/i'        =>  'Mac OS 9',
                            '/linux/i'              =>  'Linux',
                            '/ubuntu/i'             =>  'Ubuntu',
                            '/iphone/i'             =>  'iPhone',
                            '/ipod/i'               =>  'iPod',
                            '/ipad/i'               =>  'iPad',
                            '/android/i'            =>  'Android',
                            '/blackberry/i'         =>  'BlackBerry',
                            '/webos/i'              =>  'Mobile'
                        );

    foreach ($os_array as $regex => $value) { 

        if (preg_match($regex, $user_agent)) {
            $os_platform    =   $value;
        }

    }   

    return $os_platform;

}

function getBrowser() {

    global $user_agent;

    $browser        =   "Unknown Browser";

    $browser_array  =   array(
                            '/msie/i'       =>  'Internet Explorer',
                            '/firefox/i'    =>  'Firefox',
                            '/safari/i'     =>  'Safari',
                            '/chrome/i'     =>  'Chrome',
                            '/opera/i'      =>  'Opera',
                            '/netscape/i'   =>  'Netscape',
                            '/maxthon/i'    =>  'Maxthon',
                            '/konqueror/i'  =>  'Konqueror',
                            '/mobile/i'     =>  'Handheld Browser'
                        );

    foreach ($browser_array as $regex => $value) { 

        if (preg_match($regex, $user_agent)) {
            $browser    =   $value;
        }

    }

    return $browser;

}


$user_os        =   getOS();
$user_browser   =   getBrowser();

$device_details =   "<strong>Browser: </strong>".$user_browser."<br /><strong>Operating System: </strong>".$user_os."";

print_r($device_details);

echo("<br /><br /><br />".$_SERVER['HTTP_USER_AGENT']."");

?>

I have not figured that out yet, how to do in wordpress but It works well in a normal php script. May be I am doing something wrong in function.php file or template file. — Anis Rabbi, Nov 25 '16 at 23:02

score 0 · Answer 2 · answered Nov 25 '16 at 08:29

There's a modernizr extension called detectizr (https://cdnjs.com/libraries/detectizr, you have to put modernizr first). It will put to you tag os, version, browser, device ... Then you can use css to display for example:

/* Hide image with class-a by default */
img.class-a {
    display: block;
}

/* showing it in windows 10 only */
.windows.windows10 img.class-a {
    display: block;
}

How to change web content based on operating system

2 Answers2