Question

我正在为客户设置一个Wordpress主题，我正试图在较小的屏幕/手机上更换Logo。这个jquery脚本在调整大小/刷新时可用于桌面以及一些手机（诺基亚和LG Optimus），但在iPhone，三星Galaxy，谷歌Nexus和黑莓手机中，徽标不会被较小的版本取代。

下面是我正在使用的代码，这是通过主题的“自定义代码”表单添加的，并添加到页脚中。 （不幸的是，由于某些神秘的原因，我无法将子主题中的脚本排入以添加此代码段）。

我对如何解决这个问题感到茫然，我们将不胜感激。

<script>
(function($){
    var width = $(window).width(),
        defaultLogo = $('.default-logo'),
            mobileLogo = $('<img src="/wp-content/uploads/2015/11/small-logo.png" alt="" class="default-logo">');

    if(width <= 530) {
        defaultLogo.replaceWith(mobileLogo);        
    }

 })(jQuery);
</script>

Answer 1

试试这个：

(function ($) {
  /**
   * ===============================================
   * Cross-browser polyfill
   * @returns {Number|number} - Browser width (px)
   * ===============================================
   */
  function getBrowserWidth() {
    return window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  }

  function swapLogo() {
    var $logo = $('img.default-logo');
    if ($logo.length) {
      if (getBrowserWidth() < 530) {
        $logo.prop('src', '/wp-content/uploads/2015/11/small-logo.png');
      } else {
        $logo.prop('src', '/wp-content/uploads/2015/11/large-logo.png'); // replace with actual image name
      }
    }
  }

  $(function () {
    swapLogo();
    $(window).resize(swapLogo);
  });
})(jQuery);

Answer 2

这个问题已经解决，问题是主题是在视网膜屏幕上加载一个单独的徽标图像，这就是为什么我的代码无效。一旦我更换了视网膜标识，一切都按预期工作。

replaceWith（）不适用于某些手机

2 个答案: