javascript - 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 响应式设计 View ):

首先在移动设备(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 文件的 header 中发送不正确的 mime 类型。这是 chrome 特有的特性，因为 FF 更宽容。发送“text/css”修复问题。

希望对您有所帮助。