Home/ Questions/Q 7004107
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T21:09:24+00:00

I am using Typekit.com to display cufonts on a site, however, it is only

  • 0

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?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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;
    };

};
    • 0