HTML5：调整画布大小答案

【问题标题】：HTML5: Resizing a canvasHTML5：调整画布大小
【发布时间】：2014-11-04 12:38:59
【问题描述】：

一直以来，我都在开发一个分辨率为 800x480（流行的手机分辨率）的应用程序。

我的画布 HTML：

<canvas id="main" width="800" height="480">

现在要使其全屏显示其他分辨率，我在调整大小事件后执行以下操作：

$('#main').css('height', window.innerHeight);
$('#main').css('width', window.innerWidth);

这可行，但问题是我无法以这种方式保持纵横比。 800x480 是 4:3，但如果我在 5:3 手机上运行此应用，有些东西（尤其是圆圈）会显得有些拉长。

有没有什么方法可以让它在所有分辨率下看起来都很好，而不必为每个宽高比创建一组独特的图像和代码？

【问题讨论】：

【解决方案1】：

CSS 属性width 和height 拉伸画布，为了缩放板，您必须使用.attr 而不是.css，这将起作用，但是，需要注意：

如果你也想让画布在手机上看起来很完美，你必须关注window.devicePixelRatio。

什么是 devicePixelRatio

MDN：

devicePixelRatio 属性返回当前显示中物理像素与设备无关像素之间的比率。

这是什么意思？它表示一个设备显示多少像素，以一个物理像素为单位。

如果设备的像素比为 2，则表示在一个物理像素中绘制了两个图形像素。

为了让你的画布看起来完美，你必须做到这一点：

将画布的宽度和高度设置为您想要乘以devicePixelRatio的数量，即

$('canvas').attr({
  'width': window.innerWidth*devicePixelRatio,
  'height': window.innerHeight*devicePixelRatio
});

然后，使用 CSS 缩小画布：

$('canvas').css({
  'width': window.innerWidth + 'px',
  'height': window.innerHeight + 'px'
});

一开始innerWidth 和innerHeight 似乎不正确，我尝试将代码包装在 100 毫秒的 setTimeout 中，它起作用了，我想你可以将延迟减少到 10 毫秒左右，测试一下。

【讨论】：

谢谢，但我仍有一些问题。我在一个 1280x720 的手机上试过这个，所以我把这些宽度/高度值放在画布上，除了屏幕变小了。我现在在右侧和底部有黑条。如果我输入 800x480，它将是全屏的。
我的意思是你必须使用 DOM 而不是 HTML 来做那些window.innerWidth*devicePixelRatio，它不会工作，我会编辑答案。
@P.Henderson 立即测试
我试过这个，但由于某种原因它不能全屏显示。画布现在大约是窗口大小的 60%。

【解决方案2】：

您可以将@media 用于不同的分辨率，例如平板电脑和手机

@media only screen and (max-device-width : 640px) {
/* Styles */
}

【讨论】：