當窗口寬度超過768px時，僅設置畫布高度，否則將其設置爲默認值

我正在使用角度圖在我的頁面上創建條形圖。我只想將高度設置爲80，因此它不佔用我的頁面。問題是，當頁面大小減少時，例如在移動設備上，圖表會自行擠壓，因此不能清晰。如果我沒有設置畫布高度，那麼它在桌面上太大了，但在小於768像素的屏幕尺寸上看起來很棒。當窗口寬度超過768px時，僅設置畫布高度，否則將其設置爲默認值

當屏幕尺寸大於768像素時，如何將畫布高度設置爲80，並在任何較小尺寸上將其設置爲默認值。或者將畫布高度設置爲高於768像素的80，並在任何更小的畫布上設置爲150。

我一直拉我的頭髮試圖弄清楚這一點。

HTML：

<div class="chart-wrapper"> 
    <div class="chart-title"> 
    <b>Annual Sales</b> 
    </div> 
    <div class="chart-stage" ng-controller="BarCtrl"> 
    <div> 
     <canvas id="bar" class="chart chart-bar" 
        chart-data="data" chart-labels="labels" chart-series="series"> 
     </canvas> 
    </div> 
    </div> 
</div>

我已經嘗試了一些不同的東西，但畫布大小並沒有改變。

這是我最後一次嘗試：

$(document).ready(function() { 
    var $window = $(window); 
    var canvas = $('canvas')[0]; 
    var checkWidth = function() { 
     var windowsize = $window.width(); 
     if (windowsize > 768) { 
      canvas.height = 80; 
     } 
    }; 
    checkWidth(); 
    $(window).resize(checkWidth); 
});

我要指出，我試圖保持畫布寬度覆蓋屏幕的整個寬度。這就是爲什麼我在更小的屏幕上獲得壓縮效果的原因。

這是我一直在使用中發揮與它周圍的codepen：Click here

這是一個較小的屏幕上的壓扁的效果：

，這裏是我的時候會發生什麼嘗試使用媒體查詢和用CSS設置高度（我相信有必要用javascript設置）：

來源

2016-02-12 cfly24

你知道默認的[畫布]（https：//開頭開發商.mozilla.org/en-US/docs/Web/HTML/Element/canvas）height是'150'？ – hindmost

是的，這就是爲什麼我說要麼在一個較小的屏幕上默認，要麼將其設置爲150. – cfly24

'150'在較小的屏幕上，'80'在較大的屏幕上？ o_O – hindmost

你可以使用CSS：

@media only screen and (min-width:768){ 
    .canvas { 
     height: 80px; 
    } 
}

這比使用JS方法清潔一點點。而且，我相信，快:)

來源

2016-02-12 20:29:56

這就是我希望能做到的，但是當我這樣做時，它會拉伸畫布。 – cfly24

@ cfly24它延伸畫布的高度？或寬度？你也可以嘗試設置最大高度和最大寬度屬性... –

拉伸高度 – cfly24

香草js的選項，香港專業教育學院設置2個height屬性，但您可能只需要設置1

var viewWidth=document.documentElement.clientWidth || window.innerWidth || document.body.clientWidth; 
var barHeight=150; 
if(viewWidth>768) barHeight=80; 

document.getElementById('bar').style.height=barHeight+'px'; 
document.getElementById('bar').height=barHeight;

來源

2016-02-12 20:58:41 Bug

當窗口寬度超過768px時，僅設置畫布高度，否則將其設置爲默認值

回答

相關問題