Question

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

我正在使用以下Jquery代码：

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

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

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

Answer 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?

Answer 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  } ?>

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

2 个答案: