Следующий код дает правильную значение ios, когда мы вручную изменяем размер окна. Но после загрузки окна это дает rat ios как 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: На своей странице я загружаю контент в индекс. html, используя функцию загрузки следующим образом:
$("#container").load("pages/orders/_orders.html");
Я попытался поместить код захвата рациона после строки выше. Но все еще не работает.
Обновление 3: код песочницы для репликации проблемы. Посмотрите на скачок в значении WR от начального значения 1, если вы изменили ширину даже на крошечный бит.
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>
_test. html
<div id="second">
</div>