javascript - 使用从 URL 变量读取的 JavaScript 加载不同的 CSS 样式表

Question

我想在我的 wordpress 博客上使用两个不同的样式表，这样当通过网络访问页面时使用一个样式表，而当通过我们的 iOS 应用程序访问博客内容时使用另一个样式表。现在我们将 ?app=true 附加到我们的 iOS 应用程序的 URL 请求中，希望我们可以在我们的博客中搜索这个字符串并加载不同的样式表。我们正在使用 JSON API 插件，以便我们的 iOS 应用程序能够以编程方式提取我们的博客文章，并在 iOS 应用程序的 WebView 中显示它们。

在我的 wordpress 博客中，我使用 JavaScript 在 URL 中查找 ?app=true，如果是，则加载不同的样式表。

<script language="javascript" type="text/javascript">
    var currentLocation = window.location.href; 
    if(currentLocation.indexOf('/?app=true') > -1) {        
        document.write("<link rel=\"stylesheet\" type=\"text/css\" href=\"appstyle.css\" />");
    }
</script>

可以看看http://blog.meetcody.com并查看页面源。您将在标签之间看到此代码片段。

我遇到的问题是上面的代码实际上并没有加载 appstyle.css 样式表。如果你看一下http://blog.meetcody.com/wp-content/themes/standard/appstyle.css?ver=3.4.2你可以看到我正在通过在 body {} 标签中设置背景来测试这个:黑色

body {
background: black;
}

然而，在 http://blog.meetcody.com/wp-content/themes/standard/style.css?ver=3.4.2 的 style.css 中主体背景色为#F2F0EB；在正文 {} 标签中

body {
    background: #F2F0EB;
}

如何传递一个 URL 变量，例如 ?app=true 并在传递时加载不同的样式表？

Answer 1

我相信解决您的问题的最佳方法是使用 Responsive Web Design技巧。这些允许您适本地处理不同的分辨率。

基本的 CSS 看起来像下面这样......

@media screen and (min-width: 480px) {
    // CSS for iPhone
}

@media screen and (min-width: 768px) {
    // CSS for iPad
}

@media screen and (min-width: 900x) {
    // CSS for desktop
}

要点是您不需要为不同的平台加载不同的样式表。您将拥有一个适用于所有情况的样式表。它甚至可以用于您没有专门针对的平台。

构建新波士顿环球网站的团队是我对 RWD 的介绍。这是 a breakdown of what they did .