只有在窗口宽度超过 768px 时才设置画布高度，否则默认答案

【问题标题】：Only set canvas height when window width is over 768px, otherwise let it default只有在窗口宽度超过 768px 时才设置画布高度，否则默认
【发布时间】：2016-02-12 20:19:44
【问题描述】：

我正在使用角度图表在我的页面上创建条形图。我只希望将高度设置为 80，这样它就不会占用我的页面太多。问题是，当页面大小减小时，例如在移动设备上，图表会自行挤压，因此不清晰。如果我不设置画布高度，那么它在桌面上太大了，但在小于 768 像素的屏幕上看起来很棒。

当屏幕尺寸高于 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 设置）：

【问题讨论】：

你知道canvas的默认高度是150吗？
是的，这就是为什么我说要么让它在较小的屏幕上默认设置，要么将其设置为 150。
150 在小屏幕上，80 在大屏幕上？ o_O
是的，听起来很奇怪。但它在80 在较大的屏幕上很容易辨认，它需要在较小的屏幕上在150 附近才能完全清晰且不会自行折叠
@jperezov 阅读this

标签： javascript jquery canvas html5-canvas angular-chart

【解决方案1】：

你可以使用 CSS：

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

比使用 js 的方式要干净一点。而且，我相信，更快:)

【讨论】：

这是我希望我能做到的，但是当我这样做时它会拉伸画布。
@cfly24 它拉伸了画布的高度？还是宽度？您也可以尝试设置 max-height 和 max-width 属性...
拉伸高度
在这里尝试测试：w3schools.com/html/tryit.asp?filename=tryhtml5_canvas_empty我已经把这段代码放在里面并且它工作了：
我发现了这个问题：stackoverflow.com/questions/30217380/… 看起来（在第一个答案中）他可以调整画布的大小......他正在使用 js

【解决方案2】：

一个普通的 js 选项，我设置了 2 个高度属性，但您可能只需要设置 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;

【讨论】：