JS僅在刷新頁面后才能工作

Question

我有3列延伸到相等高度

這是使這3列起作用的JS： SEE DEMO

<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script>

問題是，這僅在刷新頁面時有效。 有時，我什至需要刷新頁面幾次才能使其正常工作。 有什么辦法可以解決此問題？ 謝謝！

這是我的JS結構：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="js/modernizr.js"></script>
<script src="js/foundation.min.js"></script> 
<script>
  $(document).foundation();
</script> 
<script>
   if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent) )) {
jQuery(document).ready(function($){
    var inHeight = $("#wrapper").innerHeight();
    $("#wrapper .col").each(function(){
        $(this).height(inHeight+"px");
        $(this).find('.content').height((inHeight-60)+"px");
    });
}); 
}
</script> 

Answer 1

jQuery(document).ready(function ($) {
    if(!(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Opera Mini|IEMobile/i.test(navigator.userAgent))) {
        var inHeight = $("#wrapper").innerHeight();
        $("#wrapper .col").each(function () {
            $(this).height(inHeight + "px");
            $(this).find('.content').height((inHeight - 60) + "px");
        });
    }
});