Modernizr检测object-fit异常：所有浏览器均被判定为不支持

你遇到的核心问题是Modernizr的objectfit检测属性始终无法正确返回浏览器对object-fit的支持状态，导致降级代码在所有浏览器中都被执行。下面详细分析原因并给出解决办法：

最可能的原因：Modernizr构建时未包含object-fit检测模块 #

Modernizr是按需定制的工具——如果你的Modernizr是默认预构建版本，或者自己构建时没勾选object-fit检测项，那么Modernizr.objectfit这个属性根本不会存在。此时!Modernizr.objectfit会被JS解析为!undefined，结果就是true，自然会一直触发降级逻辑，控制台始终输出"object fit is not supported"。

你可以快速验证这一点：在浏览器控制台直接输入Modernizr.objectfit，如果返回undefined，那百分百是这个问题。

解决办法 #

办法1：重新构建包含object-fit检测的Modernizr #

• 打开Modernizr官网的自定义构建页面
• 在搜索框输入object-fit，找到对应的检测项并勾选
• 完成其他需要的配置后，下载新的Modernizr文件替换项目中的旧文件
• 重新测试，此时Modernizr.objectfit会根据浏览器支持情况正确返回true或false

办法2：用原生JS写简易检测函数（无需依赖Modernizr） #

如果不想折腾重新构建Modernizr，直接用原生JS实现检测逻辑即可，准确性和Modernizr一致：

// 检测浏览器是否支持object-fit（兼容webkit前缀）
function supportsObjectFit() {
  const rootStyle = document.documentElement.style;
  return 'objectFit' in rootStyle || 'WebkitObjectFit' in rootStyle;
}

// 替换原有的判断逻辑
if (!supportsObjectFit()) {
  console.log('object fit is not supported');
  // 你的降级代码...
  tpj('.featuredpost').each(function () {
      var $container = tpj(this),
          imgUrl = $container.find('.img-responsive').prop('src');
      if (imgUrl) {
          $container
              .css('backgroundImage', 'url(' + imgUrl + ')')
              .addClass('compat-object-fit');
      }
  });
  tpj('.big-post').each(function () {
      var $container = tpj(this),
          imgUrl = $container.find('.img-responsive').prop('src');
      if (imgUrl) {
          $container
              .css('backgroundImage', 'url(' + imgUrl + ')')
              .addClass('compat-object-fit');
      }
  });
}else{
  console.log('object is supported');
}

额外排查点：脚本加载顺序 #

确保Modernizr是在你的这段业务代码之前加载完成的。如果业务代码先执行，可能会导致Modernizr.objectfit未初始化，但你提到控制台能输出信息，这个可能性相对较小，不过也可以检查下脚本的加载顺序是否正确。

内容的提问来源于stack exchange，提问作者twan