javascript - 为 Android 和 iPhone 应用不同的样式表

Question

我正在HTML5为两者构建应用程序Android并iPhone使用phonegap和jquery mobile.

是否可以为iOS和应用不同的样式表Android.

检测到特定操作系统后如何包含样式表。

以下是我的javascript代码：

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";

Answer 1

使用您所拥有的，您可以将找到deviceType的作为类添加到 body 标记中。

---

JavaScript

var deviceType = (navigator.userAgent.match(/iPad/i))  == "iPad" ? "iPad" : (navigator.userAgent.match(/iPhone/i))  == "iPhone" ? "iPhone" : (navigator.userAgent.match(/Android/i)) == "Android" ? "Android" : (navigator.userAgent.match(/BlackBerry/i)) == "BlackBerry" ? "BlackBerry" : "null";
$("body").addClass(deviceType);

CSS

下面的代码是一个示例，用于对不同设备读取的 div 进行样式设置。

div {
    /* general style for a div */
}
.iPhone div {
    /* style for a div in iPhone (will be override the general style) */
}
.Android div {
    /* style for a div in Android (will be override the general style) */
}

Answer 2

它很简单：

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'your_stylesheet_url.css') );

或者document.createStyleSheet('your_stylesheet_url.css');