CODEWITHSUNDEEP
phpjavascriptjqueryhtml
Haroldo
Haroldo

Reputation: 37377

conditional or js to detect whether user is on windows XP?

Because windows xp renders certain fonts so poorly, i would like to detect whether the user is using that OS and add a class to the body accordingly.

I'm looking ideally for an html conditional statement or php $_SERVER var to do this

However failing that a piece of javscript along the lines of below would do

if(users_os === 'xp'){
    $('body').addClass('xp');
}

What avenues should i be persuing?!!!

thanks!

EDIT: TO CLARIFY!

This is further development on a project which renders the webapp in nicer fonts if the user has it natively installed - see part of my solution here: for extending font stacks abilities.

Fonts render differently on combinations of OS and Browser, not Browser alone - i want to be able to know whether a user is on xp or not becuase it's rendering of Calibri is so very poor

Upvotes: 8

Views: 2112

Answers (6)

cam8001
cam8001

Reputation: 1641

You can use navigator.platform also:

var isXP = /NT 5.1/.test(navigator.platform)

quirksmode.org has a great class you can use to detect the browser platform here (pasted below).

I have used similar methods to conditonally include CSS on Mac platforms, as fonts can be quite different on the Mac and even break layouts with their size and spacing difference. I did it because it was very late in the project and we need a band-aid. I'm a fan of just letting different sites look different in different browsers, as long as they remain functional and attractive. For example, I implement rounded corners using CSS only, and therefore they don't show in IE. I think this is acceptable, but some may not (have a look at quoterobot.com for an example - not my work by the way!)

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {   string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {       // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {       // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

Upvotes: 0

Tom
Tom

Reputation:

You could try this

function OS()
{
    var n = navigator.oscpu;
    var Name = "empty";

    var osName = new Array("Windows XP", "Windows Vista", "Windows 7");

    var osNameAlt = new Array("Windows NT 5.1", "Windows NT 6.0", "Windows NT 6.1");

    for(a=0;a < osNameAlt.length; a++)
    {
        if (n == osNameAlt[a])
        {
            this.Name = osName[a];

            break;
        }


    }   

}



var os = new OS();


alert(os.Name);

Just add the OS names to the array

Upvotes: 0

jAndy
jAndy

Reputation: 235962

It actually makes no sense to determine which operating system is used for a Web Application. The only thing which should be of interest, is the Browser. Even in the Browser you just have to care about what it supports and what not.

In JQuery you may use the .support(), .browser() and .boxModel() methods for that purpose.

Upvotes: 7

Andy E
Andy E

Reputation: 344517

I fully agree with jAndy's answer, you shouldn't ever need OS detection for a web application and you should rarely need browser detection (the exception being stats/analytics, of course).

That being said, if you're insistent you need this, you can get what you need to know using the PHP function get_browser():

$browser = get_browser();
echo $browser["platform"];
// -> "WinXP"

Upvotes: 4

Fidi
Fidi

Reputation: 5834

Well, with PHP you could use $_SERVER['HTTP_USER_AGENT']. This string contains the browser, but also the OS. Example

Mozilla/5.0 (Windows; U; Windows NT 5.1; de; rv:1.9.2.3) Gecko/20100401 Firefox/3.6.3 (.NET CLR 3.5.30729)

With the "substr" function (which is faster) or an preg_match you can extract the OS from the string.

Upvotes: 2

mamoo
mamoo

Reputation: 8166

You should perform a check on navigator.appVersion, which contains OS version (my Win 7 become "Windows NT 6.1"):

Try this on your browser address bar to see which values are returned.

javascript:alert(navigator.appVersion);

Upvotes: 0

Related Questions