Check if iOS version >= 4.2 and revise CSS based on result

Question

I am using Typekit.com to display cufonts on a site, however, it is only compatible with mobile browsers >= 4.2 iOS. I have used jQuery to test if the visitor is using iOS and to display specific content based on that in the past (no sweat), but I'm having a great deal of trouble figuring out how to be more specific and revise the CSS ONLY IF the version is LESS than iOS version 4.2. Can't seem to figure this out... any help?

I think this will help, basically use the User Agent stuff. http://stackoverflow.com/questions/7399534/check-if-ios-version-is-3-0-or-higher-with-php-or-javascript — ToddBFisher, Jan 04 '12 at 19:53

ThinkingStiff · Accepted Answer · 2012-11-28T01:51:59.020

11

Put your 4.2+ styles into one stylesheet. Put your <4.2 styles into another. Check the version and add the appropriate stylesheet to the <head>. You'd need to test older user agent strings, but this should work with most. The function returns 0 (if it can't determine or if it's not iOS) as a fallback to the "old" stylesheet.

Demo: http://jsfiddle.net/ThinkingStiff/LJrEW/

Script:

var style = '';

if( getOsVersion() >= 4.2 ) {
    style = '<link rel="stylesheet" href="styles/ios.css" />';
} else {
    style = '<link rel="stylesheet" href="styles/ios_old.css" />';
};

document.head.insertAdjacentHTML( 'beforeEnd', style );

function getOsVersion() {
    var agent = window.navigator.userAgent,
        start = agent.indexOf( 'OS ' );

    if ( /iphone|ipod|ipad/.test( agent ) && start > -1 ) {
        return window.Number( agent.substr( start + 3, 3 ).replace( '_', '.' ) );
    } else {
        return 0;
    };

};

edited Nov 28 '12 at 01:51

answered Jan 04 '12 at 20:35

ThinkingStiff

64,767
30
146
239

Alternately, he can add a class to the body and style against that in order to avoid another HTTP round-trip. – Jeff Jan 05 '12 at 22:48
@Jeff How would that handle lots of different styles? Would you make two class for everything that was different? I guess his question is just about font, so that could work. – ThinkingStiff Jan 05 '12 at 22:52
With ``, you can then user `.ios-4-2` in the css file to override any styles. i.e. `p { color:red } .ios-4-2 p { color:blue; }` – Jeff Jan 06 '12 at 15:34
Looks like exactly what I was looking for. Will test this out and post the results soon. Thanks a million! – FurryWombat Jan 09 '12 at 20:16

score 1 · Answer 2 · answered Jan 04 '12 at 19:54

1

You can use the user-agent to get the specific ios version the device is running.

answered Jan 04 '12 at 19:54

Oscar Gomez

18,436
13
85
118

Check if iOS version >= 4.2 and revise CSS based on result

2 Answers2