检查iOS版本是否≥4.2并根据结果修改CSS

发布于 2024-12-25 01:32:10 字数 188 浏览 2 评论 0原文

我正在使用 Typekit.com 在网站上显示 cufonts，但是，它仅与移动浏览器 >= 4.2 iOS 兼容。我已经使用 jQuery 来测试访问者是否使用 iOS 并根据过去的内容显示特定内容（不费吹灰之力），但我在弄清楚如何更具体并仅修改 CSS 方面遇到了很大的麻烦如果版本低于 iOS 版本 4.2。似乎无法弄清楚这一点...有什么帮助吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

洛阳烟雨空心柳 2025-01-01 01:32:10

将您的 4.2+ 样式放入一个样式表中。将您的 <4.2 样式放入另一个样式中。检查版本并将适当的样式表添加到中。您需要测试较旧的用户代理字符串，但这应该适用于大多数情况。该函数返回 0 （如果它无法确定或者不是 iOS）作为“旧”样式表的后备。

演示： http://jsfiddle.net/ThinkingStiff/LJrEW/

脚本：

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

};

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 原文