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. stackoverflow.com/questions/7399534/… — ToddBFisher
– ToddBFisher, Commented Jan 4, 2012 at 19:53

ThinkingStiff · Accepted Answer · 2012-11-28 01:51:59Z

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, 2012 at 1:51

answered Jan 4, 2012 at 20:35

ThinkingStiff

65.4k31 gold badges148 silver badges241 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Jeff Over a year ago

Alternately, he can add a class to the body and style against that in order to avoid another HTTP round-trip.

ThinkingStiff Over a year ago

@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.

Jeff Over a year ago

With <body class="ios-4-2">, 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; }

FurryWombat Over a year ago

Looks like exactly what I was looking for. Will test this out and post the results soon. Thanks a million!

Oscar Gomez · Accepted Answer · 2012-01-04 19:54:27Z

1

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

answered Jan 4, 2012 at 19:54

Oscar Gomez

18.5k14 gold badges88 silver badges119 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related