canvasをiPhoneのsafe area内に収めてみた

はじめに

最近のiPhoneにはいやーなsafe areaというのがありますね。
普通に作ってると、ホームバーがcanvasと重なりやがる。

くそーAppleめー、めんどくさいじゃ無いか。

いろいろ情報収集してると、padding-bottomにenv(safe-area-inset-bottom)を入れておけばいいらしい。ほうほう、そうなんですね。

ぶー、かなりダメだ。稀にしか動かないような。styleは詳しく無いんだよ。

でもなんとかなった。

やり方

    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

viewport-fit=coverを追加して

<canvas style="position:absolute;
       left:env(safe-area-inset-left);
       top:0px;
       width:calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right));
       height:calc(100% - env(safe-area-inset-bottom));">
</canvas>

これでsafe area内にcanvasがいい感じで収まる。縦横切り替えても、Safariのツールバー非表示にしてもOK。

ちなみにenv(safe-area-inset-bottom)の値はjsでは取れないらしい。
js（これはdartだけど）からいじる時はこんな感じでいけた。

canvas.style.height = "calc(100% - ${なんか数字}px - env(safe-area-inset-bottom))";

しかーしcalc(100% - env(safe-area-inset-left) - env(safe-area-inset-right))とは・・・いまいちかなあ。

で、改良。こうなった。

    <div
        style="visibility: visible;position:absolute;top:0px;left: 0px;right: 0px;bottom: 0px;margin-left: env(safe-area-inset-left);margin-right: env(safe-area-inset-right);margin-bottom: env(safe-area-inset-bottom);">
        <canvas id="stage"
        style="position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;"></canvas>
    </div>

このdivのstyle、canvasだとうまくいかないんだよね。displayとかbox-sizingとかも試したけどダメ。
何がダメだったのかわからない。誰か教えて。

終わりに

paddingじゃなくて、大きさを調整すればよかったんだけど、canvasはよくわからんね。

htmlはめんどくさい。