获取元素的屏幕宽度

Question

为了在画布中提供完整的质量，我想使用画布将在屏幕上使用的实际像素数量。我正在编码的网页内容固定为 465px。但是你可以想象一下，465px 的画布不是很好。而且由于现代显示器的像素更多，我想我可以利用它来发挥我的优势。 我尝试了不同的东西，如 inderWidth、clientWidth 和正常宽度，但没有任何效果。当我用不同的缩放重新加载浏览器时，我真的需要一个改变的功能。

HTML：

<div id="myTargetDiv"></div>

Javascript：

<script>
    $("#myTargetDiv").html("<canvas id='myCanvas' style='widt: 100%" width="
        + document.getElementById("contentMain").clientWidth + "' height='"
        + document.getElementById("contentMain").clientheight
        + "'>Your Browser does not support the HTML5 canvas tag</canvas>");
</script>

如果你能在 JS 或 Jquery 中提供解决方案，我会很高兴

Answer 1

将元素的宽度和高度设置为 100%。但请确保所有父元素也是 100% 宽度/高度。

html, body, #myTargetDiv {
  width: 100%;
  height: 100%;
}