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更寬容。 發送“文本/ css”已解決的問題。

希望能幫助到你。

Answer 2

按照這個答案： window.load並不總是在chrome上觸發嗎？

似乎使用$(window).load();是不安全的$(window).load(); 在chrome上，特別是在涉及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
  });
});