有没有Blogger（blogspot）不是移动条件格式答案

【问题标题】：Is there any Blogger (blogspot) not mobile conditional format有没有Blogger（blogspot）不是移动条件格式
【发布时间】：2014-03-21 17:37:34
【问题描述】：

我想仅在我的 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>

【问题讨论】：

标签： blogger blogspot

【解决方案1】：

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

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

编辑 #1：

这只有在您启用了移动模板并将其设置为自定义时才有效。

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

希望这会有所帮助。

【讨论】：

这里有几个问题： 1. 如果 Blogger 移动模板被禁用，这仍然有效吗？ 2. 可以在 Chrome 的移动模拟器上运行吗？谢谢！
@MuhammedAslamC ：酷，难怪我的isMobile 条件不起作用，因为将其设置为自定义移动设备也搞砸了我的设计。我完全禁用了它们并使用普通的方式使我的桌面版本响应：isMobile 条件外的 viewport 元标记加上 @media 查询 CSS。

【解决方案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 中找到此条件标记值。

data:blog.isMobileRequest 是地址栏上 m= 查询的侦听值的条件。

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

image 1

如果后面不跟 m=1 或后面跟 m=0 则表示 isMobileRequest: false;

image 2

【讨论】：

【解决方案3】：

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

现在您可以根据自己的喜好使用该重定向。

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

--希望这会有所帮助。

【讨论】：

感谢您的帮助，但由于我的博客需要更轻量级的版本，因此无法使用 JS 条件语句，因为 js 只能在呈现到访问者的浏览器后才能执行。而博主条件标签在博主服务器上执行，然后呈现给访问者的浏览器。
你想要另一种方式，我在上面已经回答过了。我建议您也使用 Blogger 条件标签。 :)

【解决方案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>

【讨论】：

在我看来，这是最好的答案

【解决方案5】：

您可以使用博客的移动平台以及这样的媒体查询

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

这将仅显示您选择的媒体屏幕的移动版本。同样，您可以使用此方法附加您的 js 或 css 文件以在移动平台上显示您的内容。

【讨论】：

【解决方案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

【讨论】：

【解决方案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 用于各种屏幕尺寸。

当然，您仍然可以通过启用自定义移动模板（选择 自定义 选项）来应用上面列出的方法，前提是在单击预览按钮。

希望这会有所帮助。

【讨论】：

【解决方案8】：

您可以使用旧的 CSS 方法，这就是我的情况。

在<head>之后加上meta标签：

比：

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

【讨论】：