Question

$myWindow.on('resize', function(){
var $width = $myWindow.width();
if ($width > 870) {
  console.log('hey im 870');
  $('#the-team-wrapper .flex-content').empty();
  ajax_results.done(function(data) {
          // console.log(data.job_titles[3]);

          var employee_job_titles;


          function job_titles_display(jobtitle,ind){
            if (jobtitle.job_titles[ind].length>1) {
              var my_array = [];
              for (var i = 0; i < jobtitle.job_titles[ind].length; i++){
                my_array.push(jobtitle.job_titles[ind][i][0]['title']);
                employee_job_titles = my_array.join(' | ');
              }
            }else {
              var employee_job_titles;
              employee_job_titles = jobtitle.job_titles[ind][0]['title'];
            }
            return employee_job_titles;
          }


          for (var i = 0; i < data.employee_info.length; i++) {
            if(i%2 == 0){
              $('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+
              '</h3><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><button type="button" class="bio-prev-butt-left">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-left">x</div></div>');
            }else {
              $('#the-team-wrapper .flex-content').append('<div class="profile-parent"><div class="employee-bio-wrapper flex-item"><h2 data-id="'+data.employee_info[i]['id']+'">'+data.employee_info[i]['firstname']+" "+data.employee_info[i]['lastname']+'</h2><h3 data-id="'+data.employee_info[i]['id']+'">'+job_titles_display(data,i)+'</h3 data-id="'+data.employee_info[i]['id']+
              '"><p class="employee-bio-text employee-bio-text-not-active">'+data.employee_info[i]['bio']+'</p></div><div class="employee-profile-pic flex-item" data-id="'+data.employee_info[i]['id']+'"></div><button type="button" class="bio-prev-butt-right">View '+data.employee_info[i]['firstname']+'\'s'+' Bio</button><div class="hide-bio-close-button-right">x</div></div>');
            }

            var profile_pic_path = data.employee_info[i]['profile_pic'].split('\\').join('\\\\');
            $("#the-team-wrapper .flex-content-wrapper .flex-content .employee-profile-pic:eq("+i+")").css({'background': 'url(_employee_pics/'+profile_pic_path+')','background-repeat': 'no-repeat','background-position': 'center', 'background-size': 'cover'});
          }

        });

}

我有这个代码，它应该在宽度大于870时触发，而是在Opera上宽度大于970时触发，而在Chrome上宽度大约为890时触发。如何修复此问题并在浏览器中获得一致的结果。提前谢谢。

Answer 1

您是否使用CSS重置来中和margin元素上浏览器的默认padding或<body>？

不同的浏览器会向页面的padding添加不同数量的margin或<body>，这可以解释为什么在不同浏览器的不同位置触发该功能。

Answer 2

问题是，resize事件会在不同的时间和速率触发，具体取决于浏览器，CPU负载以及实际调整大小的速度。

在浏览器中测试以下代码。当我在一个干净的浏览器中以合理的覆盖率进行此操作时，差异通常在目标的2px左右。

（顺便说一句，你会看到我正在将jQuery选择器缓存到变量中。对于这个测试来说并不是绝对必要的，但你可能会惊讶地发现我修复了多少错误，因为编码器已经调用了未缓存的jQuery选择器willy-在整个代码中循环和其他重复的位置。

var $window = $(window);
$window.on('resize',function(){
  var w = $window.width();
  if (w > 1000) {
    console.log( w );
  } else {
    console.log('nope: ' + w)
  }
});

jQuery window.on调整大小时不在正确的时间点火

2 个答案: