Как сохранить размер DIV независимым от изменения размера окна и масштабирования?

Question

Я пытаюсь сохранить физический размер константы DIV, даже когда пользователь увеличивает или уменьшает масштаб окна браузера.

Вот моя последняя попытка:

<center>Hello world</center>

<div style="text-align:left;background-color:#474747; 
line-height:1.4;color:#a7a7a7;font-size:2vh;width:60vh;height:30vh;
bottom:0px;right:0px;margin:2vh;position:fixed;padding:1vh;">FixedDIV</div>

https://codepen.io/hexatomium/full/MWwNpzB

Это почти соответствует моей цели, за исключением случаев, когда размер окна изменяется по вертикали.

Спасибо за любые идеи.

Примечание: В идеале я хотел бы сделать эту работу в Chrome и IE11.

Answer 1

Вы можете попробовать Visual Viewport API .

Это сделает еще один шаг вперед.

const update = (event) => {
    document.getElementById("size").style.width = window.visualViewport.width / 10 + 'px';
    document.getElementById("size").style.height = window.visualViewport.height / 10 + 'px';
    document.getElementById("size").innerHTML = window.visualViewport.width + 'px';
}
visualViewport.addEventListener('scroll', update);
visualViewport.addEventListener('resize', update);
addEventListener('scroll', update);

https://codepen.io/AvremiFriedman/pen/abOejZJ

Он недостаточно хорошо работает с кодом.

Попробуйте на компьютере. Вы получите лучшие результаты.