为了说明我的问题，这是一个不真实的示例：
<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>元素以及任何可能具有css的元素都需要此元素background-image。
对于上下文，这是要确定要加载图像的分辨率。如果用户的分辨率较低，则加载1500px毫无意义，并且只是在浏览器中将其调整为300px-他们可能还拥有500px版本，下载速度更快。
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>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句