缩小以完全适应画布的大小（在iPhone、Android等上）

我正在为不同的屏幕尺寸制作一个HTML5画布性能基准。为了在评分中实现最大的客观性，基准的画布将具有固定的大小，即它不会收缩或适合匹配屏幕大小。我认为这应该保持不变，因为在小屏幕上用小画布进行测试与在大屏幕上进行测试相比是不公平的

然而，我看到在屏幕上，小于画布大小的画布没有完全渲染，我相信这会影响最终分数。另外，我不希望用户点击两次以适应画布，因为处理用户事件也会影响分数

---

如何确保小于画布大小的屏幕始终缩小以完全适合画布？这可能吗？

您可以尝试使用元查询强制调整屏幕大小，并禁用缩放。将320调换为画布宽度的任意值

<meta name="viewport" content="width=320, minimum-scale=1.0, maximum-scale=1.0" />

尽管如此，我不知道这对小于所需宽度的屏幕会有什么反应。

我做了一个测试，可能会帮助您解决调整大小的问题

代码的要点是，您只需设置一次画布的宽度和高度（画布分辨率！），然后使用css，画布所在的区域会自动调整大小，以适应您配置的屏幕

这是代码。但别忘了去看看

HTML:

Javascript:

(function (limit_canvas_size, stretch_to_fit) {

var canvas = document.getElementById('gameCanvas');
var game_area = document.getElementById('gameArea');

// try with different resolutions !
canvas.width = 600;
canvas.height = 600;

var aspect_ratio = canvas.width / canvas.height;

var context = canvas.getContext('2d');

function draw() {
    context.save();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "red";
    context.fillRect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
    context.restore();
}

function resize() {
    // start with canvas original aspect ratio
    var widthToHeight = aspect_ratio;
    var newWidthToHeight = aspect_ratio;

    // cache the window dimensions
    var newWidth = window.innerWidth,
        newHeight = window.innerHeight;

    if (limit_canvas_size) {
        // fit smaller screen entirely but maintain the resolution on bigger screens
        newWidth = newWidth <= canvas.width ? newWidth : canvas.width;
        newHeight = newHeight <= canvas.height ? newHeight : canvas.height;
        // this will be the visual aspect ratio
        newWidthToHeight = newWidth / newHeight;
    }

    if (stretch_to_fit) {
        // overwrite the current canvas aspect ratio to fit the entire screen
        widthToHeight = window.innerWidth / window.innerHeight;
    }

    // special case (only fit the screen if window is smaller than resolution)
    if (stretch_to_fit && limit_canvas_size) {
        newWidth = canvas.width;
        newHeight = canvas.height;
        newWidth = window.innerWidth <= newWidth ? window.innerWidth : newWidth;
        newHeight = window.innerHeight <= newHeight ? window.innerHeight : newHeight;
        // this will be the visual aspect ratio
        widthToHeight = newWidth / newHeight;
    }
    else {        
        // this will be the visual aspect ratio 
        newWidthToHeight = newWidth / newHeight;
    }

    // scale the game area using CSS        
    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        game_area.style.height = newHeight + 'px';
        game_area.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        game_area.style.width = newWidth + 'px';
        game_area.style.height = newHeight + 'px';
    }

    // adjust the game area position
    game_area.style.marginTop = (-newHeight / 2) + 'px';
    game_area.style.marginLeft = (-newWidth / 2) + 'px';

};

// listen to resize events
window.addEventListener('resize', function () {
    resize();        
}, false);

// also resize the screen on orientation changes
window.addEventListener('orientationchange', function () {
    resize();        
}, false);

// draw something in the canvas
// note that you dont need to redraw on resize since the canvas element stays intact    
draw();

// first resize
resize();

})(false, false); // setup 3

（功能（限制画布大小，拉伸至合适）{
var canvas=document.getElementById（'gameCanvas'）；
var game_area=document.getElementById（'gameArea'）；
//尝试不同的解决方案！
画布宽度=600；
帆布高度=600；
变量纵横比=canvas.width/canvas.height；
var context=canvas.getContext（'2d'）；
函数绘图（）{
context.save（）；
context.fillRect（0,0，canvas.width，canvas.height）；
context.fillStyle=“红色”；
context.fillRect（canvas.width/4、canvas.height/4、canvas.width/2、canvas.height/2）；
restore（）；
}
函数resize（）{
//从画布原始纵横比开始
var widthToHeight=纵横比；
var newWidthToHeight=纵横比；
//缓存窗口维度
var newWidth=window.innerWidth，
newHeight=window.innerHeight；
if（限制画布大小）{
//完全适合较小屏幕，但在较大屏幕上保持分辨率
newWidth=newWidth
#gameArea {
  position: absolute;
  left: 50%;
  top: 50%;
}
#gameCanvas {
  width: 100%;
  height: 100%;
}

(function (limit_canvas_size, stretch_to_fit) {

var canvas = document.getElementById('gameCanvas');
var game_area = document.getElementById('gameArea');

// try with different resolutions !
canvas.width = 600;
canvas.height = 600;

var aspect_ratio = canvas.width / canvas.height;

var context = canvas.getContext('2d');

function draw() {
    context.save();
    context.fillRect(0, 0, canvas.width, canvas.height);
    context.fillStyle = "red";
    context.fillRect(canvas.width / 4, canvas.height / 4, canvas.width / 2, canvas.height / 2);
    context.restore();
}

function resize() {
    // start with canvas original aspect ratio
    var widthToHeight = aspect_ratio;
    var newWidthToHeight = aspect_ratio;

    // cache the window dimensions
    var newWidth = window.innerWidth,
        newHeight = window.innerHeight;

    if (limit_canvas_size) {
        // fit smaller screen entirely but maintain the resolution on bigger screens
        newWidth = newWidth <= canvas.width ? newWidth : canvas.width;
        newHeight = newHeight <= canvas.height ? newHeight : canvas.height;
        // this will be the visual aspect ratio
        newWidthToHeight = newWidth / newHeight;
    }

    if (stretch_to_fit) {
        // overwrite the current canvas aspect ratio to fit the entire screen
        widthToHeight = window.innerWidth / window.innerHeight;
    }

    // special case (only fit the screen if window is smaller than resolution)
    if (stretch_to_fit && limit_canvas_size) {
        newWidth = canvas.width;
        newHeight = canvas.height;
        newWidth = window.innerWidth <= newWidth ? window.innerWidth : newWidth;
        newHeight = window.innerHeight <= newHeight ? window.innerHeight : newHeight;
        // this will be the visual aspect ratio
        widthToHeight = newWidth / newHeight;
    }
    else {        
        // this will be the visual aspect ratio 
        newWidthToHeight = newWidth / newHeight;
    }

    // scale the game area using CSS        
    if (newWidthToHeight > widthToHeight) {
        newWidth = newHeight * widthToHeight;
        game_area.style.height = newHeight + 'px';
        game_area.style.width = newWidth + 'px';
    } else {
        newHeight = newWidth / widthToHeight;
        game_area.style.width = newWidth + 'px';
        game_area.style.height = newHeight + 'px';
    }

    // adjust the game area position
    game_area.style.marginTop = (-newHeight / 2) + 'px';
    game_area.style.marginLeft = (-newWidth / 2) + 'px';

};

// listen to resize events
window.addEventListener('resize', function () {
    resize();        
}, false);

// also resize the screen on orientation changes
window.addEventListener('orientationchange', function () {
    resize();        
}, false);

// draw something in the canvas
// note that you dont need to redraw on resize since the canvas element stays intact    
draw();

// first resize
resize();

})(false, false); // setup 3