仅为 iOS 设备添加 CSS 样式表答案

【问题标题】：Add a CSS stylesheet only for iOS devices仅为 iOS 设备添加 CSS 样式表
【发布时间】：2014-10-16 20:37:20
【问题描述】：

如何添加专门用于 iOS 移动设备的样式表？

我想运行一个包含 Flash 的网站。显然，flash 元素在 iPhone、iPod 和 iPad 上不起作用。由于这个事实，我只想为这些设备创建一个 CSS 文件。我最担心的是 iPad，因为我可以为其他两个使用 @media screen 大小属性。

到目前为止，我所拥有的是：

var IS_IPAD = navigator.userAgent.match(/iPad/i)  != null;

if(IS_IPAD)    ({
      url: href,
      dataType: 'css',
      success: function(){                  
            $('<link rel="stylesheet" type="text/css" href="'+css/ipad.css+'" />').appendTo("head");
        }
});

这里有什么问题？

【问题讨论】：

css/ipad.css 不是有效变量。 $('<link rel="stylesheet" type="text/css" href="css/ipad.css" />').appendTo("head"); ?
仅供参考，Android 默认也不支持 Flash，如果可以提供帮助，有些人会选择不运行 Flash。重新考虑您是否真的需要 Flash 来完成您想要做的事情可能是个好主意，如果您仍想使用它，请检测是否缺少 Flash 而不是特定平台。

标签： jquery css ipad

【解决方案1】：

你可以这样做：

var is_ios = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );

这将返回真或假。

然后：

if(is_ios)    
{
 $('<link rel="stylesheet" type="text/css" href="css/ipad.css" />').appendTo("head");
};

更新：

另一种方法是测试浏览器支持，而不是使用 userAgent 检测。你可以像这样用 jQuery 做到这一点：

$('html').addClass(typeof swfobject !== 'undefined' && swfobject.getFlashPlayerVersion().major !== 0 ? 'flash' : 'no-flash');

这以“Modernizr”风格的方式工作，将一个类添加到文档的html 标记中，所以在你的 css 中你可以这样做：

 html.flash .element {
 /*Do something here if flash if enabled*/
 }

 html.no-flash .element {
 /*Do something different here if flash if not available*/
 }

【讨论】：

【解决方案2】：

为什么不只是这样：

var is_ipad = navigator.userAgent.match(/iPad/i) ? true : false;

if(is_ipad)
  $('<link rel="stylesheet" type="text/css" href="path/to/css.css" />').appendTo('head');

【讨论】：