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

在我的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),并在传递该变量时加载另一个样式表?

最佳答案

我认为解决问题的最好方法是使用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的介绍是建立新的Boston Globe网站的团队。这是a breakdown of what they did

09-25 16:54
查看更多