Question

这段时间我一直在以800x480分辨率（流行的手机分辨率）开发应用程序。

我的画布HTML：

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

现在为了使其成为其他分辨率的全屏，我在调整大小事件后执行以下操作：

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

这样可行，但问题是我无法通过这种方式保持宽高比。 800x480是4：3，但如果我在5：3手机上运行这个应用程序，有些东西（特别是圆圈）看起来会很紧张。

有没有办法让它在所有分辨率上看起来都不错，而无需为每个宽高比创建一组独特的图像和代码？

Answer 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毫秒，测试它

Answer 2

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

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