Почему Chrome Viewport не выглядит квадратным с вычисленным соотношением сторон 1,006859? ⇐ Html

[Anonymous]

У меня есть следующий HTML -файл Index4.html , содержащий следующий код;

Код: Выделить всё

/* div.height {
position: absolute;
top:0;
left:0;
width: 400px;
height: 0px;
background-color: red;
color: white;
font-size: 1.5em;
padding: 0;
margin: 0;
border: none;
} */

/* div.width {
position: absolute;
top:0;
left:400px;
width: 0px;
height: 100px;
background-color: green;
color: white;
font-size: 2em;
padding: 0;
margin: 0;
border: none;
} */

div.info {
position: absolute;
top: 50vh;
margin: auto;
left: 0;
right: 0;
}

p {
text-align: center;
color: blue;
font-size: 2em;
}

/* div.square {
width: 250px;
position: absolute;
top: 150px;
right: 100px;
background-color: purple;
aspect-ratio: 1 / 1;
} */









window.innerHeight

window.innerWidth

aspect ratio





// const height = document.getElementById("height-id");

// const width = document.getElementById("width-id");

const infoHeight = document.getElementById("info-height-id");

const infoWidth = document.getElementById("info-width-id");

const infoAspectRatio = document.getElementById("info-aspect-ratio-id");

infoHeight.textContent = "window.innerHeight: " + window.innerHeight +"px";

infoWidth.textContent = "window.innerWidth: " + window.innerWidth + "px";

infoAspectRatio.textContent = "Aspect Ratio: " + (window.innerWidth / window.innerHeight).toFixed(6);

// height.style.height = window.innerHeight + "px";

// height.textContent = "window.innerHeight: " + window.innerHeight + "px";

// width.style.width = (window.innerWidth - 400) + "px";

// width.textContent = "window.innerWidth: " + window.innerWidth + "px";







< /code>
, который я загружаю в свой браузер Chrome (версия 140.0.7339.133 (официальная сборка) (ARM64)) на моем Apple Silicon M4 MacBook Pro (MacOS Sequoia 15.6.1). Затем я отрегулирую ширину и высоту окна браузера вручную, перетаскивая на ручки окна браузера и перезагрузить файл, чтобы добраться до соотношения сторон столько 1,0, что я могу (1.006859 на самом деле является ближайшим, я могу получить с Window.innerWidth 

> равным 734px и window.innerHeight Равное 729px). Тем не менее, просмотренная область просмотра просто не выглядит квадратной, как это должно для соотношения сторон 1,008230. Он выглядит выше по высоте, чем ширина.
скриншот, прикрепленный к окну браузера.>

Подробнее здесь: https://stackoverflow.com/questions/797 ... tio-of-1-0