我可以确定网页上元素的实际宽度/高度吗?

Question

为了说明我的问题，这里有一个不真实的例子：

<img src='myimage-low.png' style='width: 150px;'>
<img src='myimage-high.png' style='width: 150px;'>

myimage-low.png是150pxx100px

myimage-high.png是1500pxx1000px

当我在网页上一直放大时，两个图像看起来是一样的。当我放大时，高清图像看起来好多了。

如果我使用 javascript 来获取带有$(elem).width();的图像宽度，它说(正如我所期望的那样(两者150px，无论缩放如何。

有没有办法在javascript中获取呈现给用户的元素的实际屏幕大小？在我上面的例子中，当我完全缩小时，它们可能会说"100px"，当我完全放大时，它们可能会说"1000px"。

注意 - 我需要能够为<img>元素以及可能具有 cssbackground-image的任何元素都需要它。

对于上下文，这是为了确定要加载的图像分辨率。如果用户使用低分辨率，加载 1500px 是没有意义的，并且只会在浏览器中将其大小调整为 300px - 他们可能拥有下载速度更快的 500px 版本。

Answer 1

向window.devicePixelRatio问好：

var el = document.querySelector('img');
function getElemSize(el) {
var rect = el.getBoundingClientRect();
return {
width: Math.round(rect.width * window.devicePixelRatio),
height: Math.round(rect.height * window.devicePixelRatio)
};
}
function updateSize() {
var size = getElemSize(el);
document.querySelector('p').innerHTML = JSON.stringify(size);
}
el.addEventListener('load', updateSize);
addEventListener('resize', updateSize);

<img src="https://howitworks.wpengine.com/wp-content/uploads/2015/09/214887-puppies-cute-puppy.jpg" style="width: 150px">
<p></p>

Answer 2

如果要查找捏合缩放，可以使用visualViewportAPI 将宽度乘以比例：

const { scale } = window.visualViewport;
const width = $(elem).width() * scale;

我尝试为示例添加一个代码段，但根据规范，iframe内的window.visualViewport.scale始终为 1。只要您的内容不在iframe中，此方法就可以为您提供捏缩放的比例(在我的浏览器控制台中测试(