Question

我想在我的Google blogspot（blogger.com）的桌面版本上加载javascript文件，因为我需要一个移动版博客的简易版。

我通过以下方式，但没有工作

<b:if cond != 'data:blog.isMobile'>;
<b:if cond = !'data:blog.isMobile'>;
<b:if cond = '!data:blog.isMobile'>;
<b:if cond='data:blog.pageType !== "data:blog.isMobile">

如何在Google blogspot中写出“不可移动”的条件？提前感谢所有答案。

=============================================== =================================

更新：我现在正在使用以下代码并且它正在运行但欢迎更好的想法

<b:if cond='data:blog.isMobile'>

<b:else/>
    //I include javascript files here and they only appear on desktop version
</b:if>

Answer 1

在这种情况下，您可以在博客条件标记中使用true或false语句。这是最好的方法;）

<b:if cond='data:blog.isMobile == &quot;false&quot;'>
//Contents inside this, will only appear in Desktop version.
</b:if>

编辑＃1：

仅当您启用了移动模板并将其设置为自定义时，此功能才有效。

enter image description here

它适用于Chrome的移动模拟器。（如果从移动设备或使用反映移动浏览器用户代理的模拟器进行访问，将重定向到移动版本。它将在URL的末尾添加?m=1

enter image description here

希望这有帮助。

Answer 2

我发现了一个有用的条件标签，最近只能在移动视图上显示。这个条件标签工作，即使我没有激活移动模板。

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
<!-- showed only if browser request as a mobile -->
<b:else/>
<!-- showed if browser not requesting as a mobile device-->
</b:if>

尝试使用我的示例：在此示例中，移动请求值为true时删除缩略图图像，如果未请求则显示缩略图。

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
            <div>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>
            </div>
<b:else/>
            <div class='item-thumbnail-only'>
              <b:if cond='data:post.thumbnail'>
                <div class='item-thumbnail'>
                  <a expr:href='data:post.href' expr:title='data:post.snippet' target='_blank'>
                    <img border='0' expr:alt='data:post.title' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
                  </a>
                </div>
              </b:if>
              <div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>
            </div>
</b:if>

您可以在blogspot页面的view-source中找到此条件标记值。

数据：blog.isMobileRequest 是一种在地址栏上查询 m = 的条件。

网址后跟 m = 1 表示 isMobileRequest：true;

image 1

如果没有 m = 1 ，或者 m = 0 ，则表示 isMobileRequest：false;

image 2

Answer 3

Blogger自己的移动数据标签就足够了。但如果你仍在寻找替代方式，你可以使用一些JS逻辑。我想你已经知道博客将所有移动设备重定向到http://yourdomain.blogspot.com/?m=1 ?m=1部分启用移动版本的位置。

现在您可以使用该重定向对您有利。

创建一个Javascript检查点，检查 Request.QueryString 是否有?m=1如果它没有其他任何内容加载您想要的Javascript。

- 希望这有帮助。

Answer 4

到目前为止，这是我发现的最佳和更新的条件标记。并且它可以在很好的天气下激活移动模板。

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<!-- display 'something' if browser not requesting as a mobile device-->
<p>Something!</p>
</b:if>

Answer 5

您可以使用博主的移动平台以及此类媒体查询

<link expr:href='data:blog.url + &quot;?m=1&quot;' media='only screen and (max-width: 640px)' rel='alternate'/>

只会显示所选媒体屏幕的移动版本。类似地，您可以使用此方法附加您的js或css文件，以便在移动平台上显示您的内容。

Answer 6

如果您要将额外的HTML / Javascript添加为小部件，则可以通过在小部件元素中设置mobile归因的值来实现此方法。

要防止在移动设备上加载小部件， <b:widget id='Attribution1' mobile='no' title='Attribution' type='Attribution'>

或者仅限移动设备使用。 <b:widget id='Attribution1' mobile='only' title='Attribution' type='Attribution'>

有关详细信息，您可以看到它here

Answer 7

说实话，术语isMobile过于宽泛，可能无法让您为所有屏幕尺寸提供预期效果 - 这可能是Blogger在处理移动响应时的限制。要使您的javascript有条件地像CSS @media查询一样工作，请使用以下示例：

<script type="text/javascript">
        if (window.matchMedia('(max-width: 950px)').matches) {
             // Do something for screen sizes not wider than 950px.
        }
        else { 
             // Do something for screen sizes wider than 950px,
             // which is pretty much what you're looking for,
             // that is (Not isMobile) equivalent.
        }

</script>

就我而言，我完全禁用了Blogger移动模板并应用了以下方法：

将现有的viewport元标记置于isMobile条件之外。
使用CSS @media查询来检测各种屏幕尺寸。
将上述javascript用于各种屏幕尺寸。

但是，当然，您仍然可以通过启用自定义移动模板（选择自定义选项）来应用上面列出的方法，前提是它在点击时不会搞砸您现有的大部分自定义设计在预览按钮上。

希望这有帮助。

Answer 8

您可以使用我的情况下的旧CSS方法。

在meta之后添加<head>标记：

比：

HTML

<div class="mobile">
  Mobile Content
</div>
<div class='desktop'>
  Desktop Content
</div>

CSS

/* if you are using desktop first*/
.mobile{
  display:none;
}
@media (max-width: 960px){
  .desktop{
    display:none;
  }
  .mobile{
    display:block;
  }
}

HTML and CSS codes

是否有任何Blogger（blogspot）不是移动条件格式

8 个答案: