尝试仅在移动设备上移动 wordpress 标题答案

【问题标题】：Trying to move wordpress title on mobile only尝试仅在移动设备上移动 wordpress 标题
【发布时间】：2020-01-30 04:27:41
【问题描述】：

目前正在尝试完成 Wordpress 构建，但遇到了一个小问题。

我正在使用以下 Jquery 代码：

jQuery( document ).ready( function ($) {
    var mobile = $(window).width();
    if ( mobile <= 680 ){
        $( ".product_title.entry-title" ).insertBefore( ".woocommerce-product-gallery" );
    }
} );

因此，当屏幕小于 680 像素时，“product_title.entry-title”类将插入“woocommerce-product-gallery”类之前。这基本上将标题移动到我的产品页面上的产品库上方。

但是这让我很烦，因为此代码仅在每次刷新页面时才会触发。因此，如果我加载页面并调整浏览器大小，直到我刷新它才会发生任何事情。有什么替代方法可以避免这种情况吗？

【问题讨论】：

您可以保留两个标题，一个用于移动设备，另一个用于 600 像素以上的视口。现在使用 css 媒体查询控制标题的显示。无需使用 Jquery。 developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/…
媒体查询在这里绝对是正确的解决方案，如上所述。但是，要修复您当前的实现，您需要查看 window.onresize event。如果使用这个事件，你肯定也想使用 debouncer。
我知道我可以使用 CSS 媒体查询。但这将涉及深入研究我的 Wordpress 主题并弄乱布局。我试图避免接触任何 HTML。
Media query 是您的绝佳解决方案。
只需在该部分添加自定义类（允许 WP 选项）通过媒体查询使用此类定位该标题，您不需要 JS

标签： javascript jquery html css wordpress

【解决方案1】：

根据@Partha Roy 的评论，您可以像这样使用媒体查询：

.product_title.entry-title.mobile-only {
  display: block;
}
.product_title.entry-title.desktop-only {
  display: none;
}

@media (min-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: none;
  }
  .product_title.entry-title.desktop-only {
    display: block;
  }
}

或者在非移动响应优先策略中：

.product_title.entry-title.mobile-only {
  display: none;
}
.product_title.entry-title.desktop-only {
  display: block;
}

@media (max-width: 680px) {
  .product_title.entry-title.mobile-only {
    display: block;
  }
  .product_title.entry-title.desktop-only {
    display: none;
  }
}

当然，您需要在您想要的位置放置两组 HTML。

<div class="product_title entry-title desktop-only">...</div>
<div class="product_title entry-title mobile-only">...</div>

你可以参考这个类似的问题：How to show text only on mobile with CSS?

【讨论】：

我知道如何使用媒体查询哈哈...我的问题是需要进入我正在使用的 Wordpress 主题并在某些 HTML 中进行编辑。而且我不知道在编辑主题文件时从哪里开始。因此，为什么我只是在寻找一个快速的 Jquery 解决方案。 -- 如果我知道在哪里编辑我的主题文件，我会创建另一个标题并给它一个移动类。
你应该参考这个答案以获得一个好的解决方案：stackoverflow.com/a/9828919/9339513

【解决方案2】：

您可以使用 WordPress 内置的“移动检测”功能 wp_is_mobile 创建一个简单的短代码，可以对移动访问者和/或桌面访问者隐藏您内容的某些部分。从移动浏览器查看您的网站时，wp_is_mobile 函数返回 true。使用此功能，您可以根据访问者设备创建自适应/响应式 WordPress 主题。

For example,

<?php  if( wp_is_mobile()){  ?>
 // mobile stuff goes here
   <div class="product_title entry-title mobile-only"> << Mobile Text >> </div>
<?php } else { ?>
   // desktop stuff goes here
   <div class="product_title entry-title desktop-only"> << Desktop Text >> </div>
<?php  } ?>

【讨论】：