Javascript 仅当窗口宽度超过768px时设置画布高度，否则默认设置

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

当屏幕大小大于768px时，如何将画布高度设置为80，并将其默认设置为任何较小的大小。或者将画布高度设置为高于768px的80，或设置为小于768px的150

我一直在绞尽脑汁想弄明白这一点

HTML:

我应该注意，我试图保持画布的宽度，以覆盖整个屏幕的宽度。这就是为什么我在更小的屏幕上得到挤压效果

这是我一直在使用的代码笔：

这是较小屏幕上的挤压效果：

下面是当我尝试使用媒体查询并使用CSS设置高度时发生的情况（我认为有必要使用javascript进行设置）：

您可以使用CSS：

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

---

它比使用js方法更简洁。而且，我相信，更快：）

一个普通的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;

---

你知道默认高度是

150

？是的，这就是为什么我说要么在小屏幕上默认，要么在大屏幕上设置为150。

150

？好吧，听起来很奇怪。但在较大的屏幕上，它在

80

处很容易辨认，在较小的屏幕上，它需要在

150左右才能完全辨认，而不是折叠在屏幕上itself@jperezov阅读这篇文章是我希望我能做的，但当我这样做时，它会拉伸画布。@cfly24它会拉伸画布的高度吗？还是宽度？您还可以尝试设置max-height和max-width属性…在这里拉伸height测试：我把这段代码放在里面，它成功了：canvas{height:1000px}@media-only屏幕和（min-width:768px）{canvas{height:80px；}我发现了这个问题：看起来（在第一个答案中）他可以调整画布的大小。。。他正在使用js
@media only screen and (min-width:768){
    .canvas {
        height: 80px;
    }
}

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;