3

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

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

<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 {
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，当传递时，我加载不同的样式表？

4

3 回答 3

0

我在您的站点上使用 Firebug 控制台尝试了一些操作。因此，实际起作用的是以下代码：

<script type="text/javascript">
if(window.location.href.indexOf('/?app=true') > -1) {
    var fileref=document.createElement("link");
    fileref.setAttribute("rel", "stylesheet");
    fileref.setAttribute("type", "text/css");
    fileref.setAttribute("href", "http://blog.meetcody.com/wp-content/themes/standard/appstyle.css");
    document.getElementsByTagName("head")[0].appendChild(fileref);
}
</script>

（此代码改编自动态加载外部 JavaScript 或 CSS 文件）。

由于您正在加载其他样式表并且我猜您覆盖了他们的规则，因此您必须在所有其他样式表之后加载此样式表。因此，将此代码放在文档的末尾或window.onload事件中。

于 2012-12-25T08:12:28.840 回答
0

我相信解决问题的最佳方法是采用响应式网页设计技术。这些允许您适当地解决不同的解决方案。

基本的 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 的介绍。以下是他们所做工作的细目。

于 2012-12-22T22:39:40.263 回答
0

您还可以嗅出用户代理字符串。这样你就不必通过任何东西。在大多数情况下，我通常不会推荐它，但在这种特殊情况下，您无需大量代码就可以安全地做到这一点。

// Define what "webview" is
var is_uiwebview = /(iPhone|iPod|iPad).*AppleWebKit(?!.*Safari)/i.test(navigator.userAgent);

// See if this user is coming from it
if (is_uiwebview = true) {
// Your code to make the <link> with a proper href
// Raul's would work perfectly
};

同样，正如其他人所说，确保它在您的纯 Web 样式表之后加载内容。也不完全确定= true是否需要。

于 2013-12-27T00:39:21.030 回答