Android Chrome CanvasRenderingContext2D 画布比例不正确

Question

我试图让一个在 HTML 5 画布中运行的游戏在所有设备上看起来都一样，而且我大部分时间都在那里。 游戏通常会调整自身大小以填充 100% 的可用高度或 100% 的可用宽度（以更好的为准），同时保持 9:16 的纵横比。 但是，某些在 Chrome 上浏览页面的 Android 移动设备无法正确缩放画布内容。 一些画布内容未显示在屏幕上，使游戏无法播放。

MindmetriQ 显示正确

MindmetriQ显示不正确（注意右边的7是不可见的，而且底部的按钮不是明显的按钮，导致一般用户认为游戏没有反应）

浏览器不显示滚动条的事实意味着画布本身正确填充了可用空间，它一定是无法正常工作的 CanvasRenderingContext2D 缩放。 只有 Android Chrome 表现出这种行为，并且仅适用于某些设备。 通过浏览 BrowserStack 上的设备/浏览器组合列表（不要与 BrowserSack 混淆），我发现它在这些组合上显示不正确：

• OnePlus 8 - 铬
• 摩托罗拉 Moto G7 Play - Chrome
• 小米红米 Note 9 - 铬
• Oppo Reno 3 Pro - 铬

在测试各种设备/浏览器组合时，我并未详尽无遗，但我确实尝试了每个可用制造商的设备上的每个可用浏览器。 此外，我的同事（以及我们的一些实际用户）使用真实设备发现了其他具有相同行为的组合，主要是 Android Chrome。 我们从未在台式机或平板电脑上重现此问题，iOS 手机也很少出现。

该游戏套件称为 MindmetriQ，并在此处部署到生产环境中。 （MindmetriQ 套件中还有 5 个其他游戏受到同样的影响，但这款游戏最能说明问题。）游戏本身是用 TypeScript 编写的，我们将其嵌入到 ASP .Net MVC 页面中。

打字稿（事件监听器.ts）：

private scaleCanvasToAvailableSpace(maxAvailableWidth: number, maxAvailableHeight: number): void {
    //Anything in all caps is a number constant defined in constants.ts
    const nativeAspectRatio = CANVASWIDTH / CANVASHEIGHT;

    const currentAspectRatio = maxAvailableWidth / maxAvailableHeight;
    let desiredWidth: number;
    let desiredHeight: number;
    if (currentAspectRatio > nativeAspectRatio) {
        desiredHeight = maxAvailableHeight;
        desiredWidth = desiredHeight * nativeAspectRatio;
    } else {
        desiredWidth = maxAvailableWidth;
        desiredHeight = desiredWidth / nativeAspectRatio;
    }
    //Performance improvement to prevent resizing when dimensions have barely (or not) changed
    if (Math.abs(this._canvas.width - desiredWidth) > 0.25) {
        this._canvasScale.x = desiredWidth / CANVASWIDTH;
        this._canvasScale.y = desiredHeight / CANVASHEIGHT;

        //_canvas is the HTMLCanvasElement
        this._canvas.width = desiredWidth;
        this._canvas.height = desiredHeight;
        //S_Context is the CanvasRenderingContext2D for the canvas
        //_canvasScale is just a holder of two numbers, x & y, for use when we draw on the canvas
        S_Context.scale(this._canvasScale.x, this._canvasScale.y);
        //S_AccessibilityHandler is a custom accessibility framework that builds divs,
        //associates them with things in the canvas, and moves the divs around
        //whenever the corresponding thing moves.
        //They're designed to be visible to screen readers only.
        //This has caused a lot of bugs in the past, but usually by stretching the viewport too wide
        S_AccessibilityHandler.setOffset(this._canvas.offsetLeft, this._canvas.offsetTop);
    }
}

window.onresize = (event: UIEvent) => {
    this.scaleCanvasToAvailableSpace(window.innerWidth, window.innerHeight);
};
this.scaleCanvasToAvailableSpace(window.innerWidth, window.innerHeight);
//Hack to handle how some mobile browsers believe that an address bar is part of the inner window,
//even though it clearly isn't
//We recalculate the available height after the browser has finished sliding in the address bar
//This causes a flash 1 second after the page loads on certain browsers
//This fix is for an entirely separate canvas resizing bug
//where the canvas content was overflowing off the bottom of the window,
//and the overflow height was always equal to the address bar height
setTimeout(() => {
    this.scaleCanvasToAvailableSpace(window.innerWidth, window.innerHeight);
}, 1000);

CSHTML：

@model TestPartnership.Web.Controllers.ViewModels.Mindmetriq.InitialLoadViewModel
@using System.Globalization
@using System.Web.Optimization
@using TestPartnership.Core.Helpers
@using TestPartnership.Localisation
@using TestPartnership.Web.Utilities
@{
    Layout = null;
    var skin = SessionManager.GetSkin();
    var favIconPath = skin == null ? "/Content/Images/favicon.png" : skin.FavIconPath;
}

<html lang="@SessionManager.GetLanguage().GetHtmlLangAttribute()">
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>@Model.Title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0" />
    <link rel="shortcut icon" sizes="32x32" href="@favIconPath" />

    @*----Apple Junk Start----*@
    <link rel="apple-touch-icon" href="@favIconPath" />
    <link rel="apple-touch-icon" sizes="120x120" href="@favIconPath" />
    <link rel="apple-touch-icon" sizes="152x152" href="@favIconPath" />
    <link rel="apple-touch-icon-precomposed" sizes="120x120" href="@favIconPath" />
    <link rel="apple-touch-icon-precomposed" sizes="152x152" href="@favIconPath" />
    @*------Apple Junk End------*@

    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <link href="~/Styles/Framework/mindmetriq-base.css" rel="stylesheet">
</head>
<body>
<canvas id="mindmetriq" width="459" height="816">@TranslationHelper.CandidateMindmetriqHtml5Message</canvas>    

@Scripts.Render("~/MindmetriQ")

<script>
window.onload = (function() {
    // ReSharper disable once UseOfImplicitGlobalInFunctionScope
    window.mindmetriq = new Main("@Model.Name",
        "@(Model.Language)",
        "@(Model.BaseSubmitUrl)",
        "@(Model.BaseAssetUrl)",
         @(Model.AssessmentSectionId),
         @(Model.SkipTutorial.ToJsString()),
         @(Model.ExtraTimeFactor.ToString("F2", CultureInfo.InvariantCulture))
         @if (Model.TimeBoostsRecordedOnServer.HasValue)
         {
             <text>,</text>@(Model.TimeBoostsRecordedOnServer.Value)
         }
         @if (Model.BoostRecordedForCurrentQuestion.HasValue)
         {
             <text>,</text>@(Model.BoostRecordedForCurrentQuestion.Value.ToJsString())
         }
    );
    window.mindmetriq.run();
});
</script>
</body>
</html>

CSS：

body,
html {
    touch-action: manipulation;
    font-family: 'Roboto';
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

canvas {
    background-color: #f2f2f2;
    border: 1px solid #78909c;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    padding: 0;
    -ms-touch-action: pinch-zoom;
    touch-action: pinch-zoom;
}

div.mindmetriq-accessibility {
    position: absolute;
    background: transparent;
    pointer-events: none;
    touch-action: none;
}

您知道为什么某些浏览器（而不是其他浏览器）不能正确缩放画布内容吗？