Javascript 加载后无法获得正确的文档/窗口宽度/高度比_Javascript_Jquery

Javascript 加载后无法获得正确的文档/窗口宽度/高度比

javascript jquery

Javascript 加载后无法获得正确的文档/窗口宽度/高度比,javascript,jquery,Javascript,Jquery,当我们手动调整窗口大小时，下面的代码给出了正确的比率。但在加载窗口后，它给出的比率为1，即使我将窗口大小设置为大于1。我强制重置虚拟控件以重新计算值，但没有效果不知道我错在哪里 $(document).ready(function(){ var heightRatio = $(document).height()/$(window).height(); var widthRatio = $(document).width()/$(window).width(); $("#dummy").

当我们手动调整窗口大小时，下面的代码给出了正确的比率。但在加载窗口后，它给出的比率为1，即使我将窗口大小设置为大于1。我强制重置虚拟控件以重新计算值，但没有效果

不知道我错在哪里

$(document).ready(function(){
 var heightRatio = $(document).height()/$(window).height();
 var widthRatio = $(document).width()/$(window).width();

$("#dummy").resize(function(){
  heightRatio = $(document).height()/$(window).height();
  widthRatio = $(document).width()/$(window).width();
  console.log(heightRatio + ": " + widthRatio);
});
$(window).resize(function(){
  heightRatio = $(document).height()/$(window).height();
  widthRatio = $(document).width()/$(window).width();
  console.log(heightRatio + ": " + widthRatio);
});
$("#dummy").resize();
});

更新：我制作了一个简单的测试页面，其中的代码似乎按照预期工作

更新2：在我的页面中，我使用加载函数加载index.html中的内容，如下所示：

$("#container").load("pages/orders/_orders.html");

我试着在上面一行后面加上配给捕获代码。但仍然不起作用

更新3：复制问题的沙箱代码。从初始值1看WR值的跳跃，如果你调整宽度，哪怕是一点点

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #one{
      display: grid;
      border: 1px black solid;
      width: 600px;
      height: 1200px;
      background-color: black;
    }
    #second{
      border: 1px black solid;
      width: 3000px;
      height: 200px;
      background-color: red;
    }
    #container{
      display: grid;
      top: 200px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="main-container">
    <div id="one">
      <div id="dummy"></div>
    </div>
    <div id="container"></div>
  </div>


  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 
  <script>

    //$("#container").load("_test.html");
    $(document).ready(function(){
    $("#container").load("_test.html");
    var heightRatio = $(document).height()/$(window).height();
    var widthRatio = $(document).width()/$(window).width();

    $("#dummy").resize(function(){
      heightRatio = $(document).height()/$(window).height();
      widthRatio = $(document).width()/$(window).width();
      console.log("from Dummy HR: " + heightRatio + "   WR: " + widthRatio);
    });
    $(window).resize(function(){
      heightRatio = $(document).height()/$(window).height();
      widthRatio = $(document).width()/$(window).width();
      console.log("From Window HR:"+ heightRatio + " WR: " + widthRatio);
    });
    $("#dummy").resize();
    });
  </script>
</body>
</html>

<div id="second">

</div>


文件
#一个{
显示：网格；
边框：1px黑色实心；
宽度：600px；
高度：1200px；
背景色：黑色；
}
#第二{
边框：1px黑色实心；
宽度：3000px；
高度：200px；
背景色：红色；
}
#容器{
显示：网格；
顶部：200px；
左：0；
宽度：100%；
z指数：1；
}
//$（“#container”）.load（“_test.html”）；
$（文档）.ready（函数（）{
$（“#container”）.load（“_test.html”）；
var heightRatio=$（文档）.height（）/$（窗口）.height（）；
var widthRatio=$（文档）.width（）/$（窗口）.width（）；
$（“#虚拟”）.resize（函数（）{
heightRatio=$（文档）.height（）/$（窗口）.height（）；
宽度比率=$（文档）.width（）/$（窗口）.width（）；
控制台日志（“从虚拟HR:+高度比+”WR:+宽度比）；
});
$（窗口）。调整大小（函数（）{
heightRatio=$（文档）.height（）/$（窗口）.height（）；
宽度比率=$（文档）.width（）/$（窗口）.width（）；
控制台日志（“从窗口HR:+高度比+”WR:+宽度比）；
});
$（“#虚拟”）.resize（）；
});

\u test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

  <style>
    #one{
      display: grid;
      border: 1px black solid;
      width: 600px;
      height: 1200px;
      background-color: black;
    }
    #second{
      border: 1px black solid;
      width: 3000px;
      height: 200px;
      background-color: red;
    }
    #container{
      display: grid;
      top: 200px;
      left: 0;
      width: 100%;
      z-index: 1;
    }
  </style>
</head>
<body>
  <div id="main-container">
    <div id="one">
      <div id="dummy"></div>
    </div>
    <div id="container"></div>
  </div>


  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> 
  <script>

    //$("#container").load("_test.html");
    $(document).ready(function(){
    $("#container").load("_test.html");
    var heightRatio = $(document).height()/$(window).height();
    var widthRatio = $(document).width()/$(window).width();

    $("#dummy").resize(function(){
      heightRatio = $(document).height()/$(window).height();
      widthRatio = $(document).width()/$(window).width();
      console.log("from Dummy HR: " + heightRatio + "   WR: " + widthRatio);
    });
    $(window).resize(function(){
      heightRatio = $(document).height()/$(window).height();
      widthRatio = $(document).width()/$(window).width();
      console.log("From Window HR:"+ heightRatio + " WR: " + widthRatio);
    });
    $("#dummy").resize();
    });
  </script>
</body>
</html>

<div id="second">

</div>

页面加载后是否需要立即调整这些项目的大小？@Mike我正在调整dummy的大小，以便作为黑客立即获得比率。