獲得屏幕寬度元素

爲了在畫布中提供完整的質量，我想使用畫布在屏幕上使用的實際像素量。我編碼的網頁內容固定爲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

獲得屏幕寬度元素

回答

相關問題