简单的东西, 在下面的脚本中,我将“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);