chrome mobile，jquery .ready（）在预期时不会触发

Question

我正在开发桌面/移动应用。 jQuery $(document).ready();肯定会被解雇，这就是应用程序运行的原因。但是，在Chrome移动浏览器中，一个特定的功能（向一个元素添加一些动态CSS以正确放置它）不能正确触发，因此在页面加载时不会更新CSS。该函数正常触发并在桌面浏览器中更新CSS。这是代码：

$(document).ready(function() {
  function placeBook() {
    var h = $('#header').css('height');
    $('#button').css('height', h);
    $('#button').css('line-height', h);
  }
  placeBook();
  $(window).resize(function() {
    placeBook();
  });
});

函数placeBook()在第一次加载页面时没有更新#button div的CSS。但是，该函数在调整窗口大小时正常 ，如代码中所指定。它仅在页面初始加载时在移动浏览器上失败。见这些SS：

首次加载桌面（FF响应式设计视图）：

首次加载移动设备（Chrome）：

正如您所看到的，我们的想法是图书图标将在标题中垂直居中。当然，任何帮助都表示赞赏。

这是HTML / CSS：

<div id='header'>
   <div id='button'>&#xe600;</div>
</div>


#header {
   position: fixed;
   top: 0;
   width: 100%;
   font-size: 120%;
   text-align: center;
}
#button {
   position: absolute;
   top: 0;
   left: 0;
   padding: 0 1%;
}

Answer 1

Chrome中存在类似问题：css未应用于dom，但在控制台中更新或修改后的样式开始应用。

问题在于在css文件的头文件中发送不正确的mime类型。这是特定于铬的特性，因为FF更宽容。发送＆＃34; text / css＆＃34;修复问题。

希望它有所帮助。

Answer 2

根据这个答案： window.load doesn't fire always on chrome?

似乎在chrome上使用$(window).load();是不安全的，特别是在DOM修改方面。而是使用$(document).ready();！我已经创建了一个简单的小提琴来确认加载并不总是在chrome中激活：http://jsfiddle.net/KvD6G/

此外，不要使用javascript修复此问题，而是通过应用以下样式尝试使用css：

#button {
  ...
  display:inline-block; 
  vertical-align:middle;
  ...
}

Answer 3

我认为您必须将placebook()函数放在doc ready处理程序之外的全局范围内：

function placeBook() {
    var h = $('#header').css('height');
    $('#button').css({
       'height': h,
       'line-height': h
    });
}



$(window).load(function() {
  placeBook();
  $(window).resize(function() {
    placeBook();
  }).resize(); //<----invokes the resize function immediately
});

虽然您没有提到doc ready handler：

function placeBook() {
    var h = $('#header').css('height');
    $('#button').css({
       'height': h,
       'line-height': h
    });
}

$(function(){  //<------------------doc ready handler
  $(window).load(function() {
    placeBook();
    $(window).resize(function() {
       placeBook();
    }).resize(); //<----invokes the resize function immediately
  });
});