Question

我的目的是实现类似于CSS链接的功能，当你添加 media 属性时，你可以禁用那些分辨率小于n像素的CSS并仍然加载它们并使用它们。

我想要做的是使用jQuery和Bootstrap将Joomla网站改编成移动网站，但是一些插件在插入时调用自己的脚本和CSS文件，我无法改变这种行为，也不能删除脚本因为客户端不希望桌面布局发生变化。所以对于CSS我这样做了：

$(document).ready(function({
$('body').find('link').attr('media', 'screen and (min-width:969px)');
}));

这实际上适用于CSS，因为它仍然加载，但不会干扰调用Bootstrap的移动布局。那么下一步是什么尝试为脚本做同样的事情，我试过这个

$(document).ready(function({
$('body').find('script').each(function(){
   var screen = parseInt($(window).width());
      if(screen>==969){
      $(this).removeAttr('src');
      }
   });
}));

但是它不起作用，如果屏幕尺寸发生变化，这个解决方案也无法工作，所以我错过了什么，或者什么是最好的方法？我的目的是针对身体，因为这里插入的标签可能出现在这里。如果我删除所有脚本标签dekstop的内容将无法正常显示。是否有某些东西作为脚本标签的媒体属性？

Answer 1

对于javascript，您可以使用Modernizr的mq函数，这允许您以编程方式检查当前浏览器窗口状态是否与媒体查询匹配。

首先你必须加载modernizr.js

例如： small = Modernizr.mq（'only all and（max-width：1200px）'）; ... 如果（小）{ ... }

在移动屏幕尺寸

1 个答案: