一直以来，我一直在以800x480分辨率（手机分辨率）开发应用程序。
我的画布HTML：
<canvas id="main" width="800" height="480">
现在要使其全屏显示其他分辨率，我在调整大小事件之后执行以下操作：
$('#main').css('height', window.innerHeight);
$('#main').css('width', window.innerWidth);
这可行，但是问题是我不能以这种方式保持宽高比。
800x480是4：3，但是如果我在5：3的手机上运行此应用程序，某些东西（尤其是圆圈）看起来会很绷紧。
有什么方法可以使它在所有分辨率下看起来都不错，而不必为每个纵横比都创建一组独特的图像和代码？
最佳答案
CSS属性width和height拉伸画布，以便缩放面板，必须使用.attr而不是.css，这将起作用，但是，需要注意以下几点：
如果您也想让画布在手机上看起来完美，则必须注意window.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毫秒左右，然后进行测试。小提琴：
http://jsfiddle.net/mdibaiee/7o4tLr4L/
要在您的手机上测试：
http://fiddle.jshell.net/mdibaiee/7o4tLr4L/show/
关于javascript - HTML5:调整 Canvas 大小，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/25772614/