0

简单的东西，在下面的脚本中，我将“mobile”类添加到元素中。

该脚本的目标是通过基于屏幕分辨率的 require.js 为我的主题提供响应功能。

它应该几乎是不言自明的，但我不明白为什么它只是被插入到主页上：如果我打开任何其他页面，移动类不存在。

(function($) {
var htmlCache = { desktop: null, mobile: null };

var reload_page = function(mobile) {
  var bodyHtml = '';

  if(mobile && htmlCache.mobile)
    bodyHtml = htmlCache.mobile;
  else if(!mobile && htmlCache.desktop)
    bodyHtml = htmlCache.desktop;
  else
    $.ajax(location.href, {
      type: 'POST',
      async: false,
      data: {
        ajax: 1,
        force_mobile: mobile ? 1 : null
      },
      success: function(data)
        {
          if(mobile) {
            htmlCache.mobile = data;
          }
          else
            htmlCache.desktop = data;
          bodyHtml = data;
        },
      dataType: 'html'
    });

  $('body').html(bodyHtml);
};

$(function() {
  // Be responsive only on desktop
  if($('body').hasClass('mobile')) {
    return;
  } else {
    htmlCache.desktop = $('body').html();

    enquire.register('screen and (max-width:1080px)', {
      match: function() {
        reload_page(true);
        $('body').addClass('mobile');
        $('<link />', {
          rel: 'stylesheet',
          id: 'mobile-css',
          href: 'http://dev.andreapuiatti.com/dev0/wp-content/themes/spk/mobile.css?ver=3.6',
          media: 'all'
        }).appendTo('head');
      },
    });

    enquire.register('screen and (min-width:1081px)', {
      match: function() {
        reload_page(false);
        $('body').removeClass('mobile');
        $('#mobile-css').remove();
      },
    });
  }
});
})(jQuery);
4

0 回答 0