获得屏幕宽度元素

为了在画布中提供完整的质量，我想使用画布在屏幕上使用的实际像素量。我编码的网页内容固定为465px。但你可以想象一下，465px的画布不是很好。而且，由于现代显示器的像素更多，我认为我可以利用这个优势。我尝试了不同的东西，如innderWidth，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的

来源

2016-11-10 Joel

[元件的总宽度]的可能的复制（http://stackoverflow.com/questions/349705/total-width-of-element-including-padding-and-border-in-jquery）和[通过搜索SO发现了许多类似的答案]（http://stackoverflow.com/search?q=jquery+width+of+element）。 – Rob

@Rob 1）此评论中提供的答案甚至不起作用。 2）即使它工作，它会返回在CSS中定义的宽度。我真的需要**屏幕**宽度 – Joel

如果你想让它适应不同的缩放级别，你可以做的不多。没有确定缩放设置的标准方法。尽管对于Firefox和Chrome我使用window.devicePixelRatio，因为它会改变以反映缩放设置。即缩放110％.devicePixelRatio = 1.100然后，将innerWidth和innerHeight乘以该值。但我不知道其他或更旧的浏览器会做什么。 – Blindman67

设置你的元素的宽度和高度，提供解决方案到100％。但请确保所有父元素也是100％宽度/高度。

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

来源

2016-11-10 15:03:30 sed

这并不能帮助我。我需要这些信息来计算我的画布有多少像素。如果我用465px定义画布，然后添加一个1500px的图片，它将缩小，看起来真的，真的很糟糕 – Joel

@Joel'console.log（document.getElementById（'myTargetDiv'）。offsetWidth +'x'+ document。的getElementById（ 'myTargetDiv'）。的offsetHeight）' – sed

获得屏幕宽度元素

回答

相关问题