WASMのゲームをブラウザで拡大表示する方法 #CSS

　golangとebitengineでwasmなゲームを作っていて。動いたのですが。ブラウザで拡大表示するのに少し苦労しました

index.html

<!DOCTYPE html>
<head>
<style type="text/css">
html, body, iframe {
	width: 100%; height: 100%;
}
body, iframe {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
</style>
</head>
<body>
<iframe id="Game" src="main.html" scrolling="no"></iframe>
<script><!--
window.addEventListener('load',screenResize,false);
window.addEventListener('resize',screenResize,false);

let retimer;
function screenResize(event) {
	clearTimeout(retimer)
	retimer = window.setTimeout(function(){
		
		let scaleX = window.innerWidth / 1280; // ゲーム画面の横幅（px.）
		let scaleY = window.innerHeight / 720; // ゲーム画面の縦幅（px.）
		let scale = Math.min(scaleX, scaleY);
		
		document.getElementById('Game').width = window.innerWidth * scale;
		document.getElementById('Game').height = window.innerHeight * scale;

	}, 100);
}
//--></script>
</body>
</html>

　pixi.jsなどで良く使われている画面拡大ルーチンをiframeへ対応したのですが。CSSの設定が難しい。とりあえず動いてはいますが。想定の動作とは少し違っているので改善の余地はあります

（main.htmlは、ebitengineのwasm読み込みhtmlファイルです）

　メモを置いておきます

付記：簡単な方法

indexhtml

<!DOCTYPE html>
<head>
<style type="text/css">
html, body, iframe {
	width: 100%; height: 100%;
}
body, iframe {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
}
</style>
</head>
<body>
<iframe id="Game" src="main.html" scrolling="no" allow="autoplay; fullscreen;"></iframe>
</body>
</html>

　でも、iframeの全面表示化と、ebitengineの補正機能で、普通で全画面表示が可能でした

　でも、自分はiframeを画面へ合わせて拡大表示して、余白へバックグラウンド画像を表示するんだ…

付記：その後

indexhtml

<!DOCTYPE html>
<head>
<style type="text/css">
html, body {
	width: 100%; height: 100%;

	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	
	-ms-overflow-style: none;
	scrollbar-width: none;
}
body::-webkit-scrollbar {
    display: none;
}
</style>
</head>
<body>
<script src="wasm_exec.js"></script>
<script>
// Polyfill
if (!WebAssembly.instantiateStreaming) {
  WebAssembly.instantiateStreaming = async (resp, importObject) => {
    const source = await (await resp).arrayBuffer();
    return await WebAssembly.instantiate(source, importObject);
  };
}

const go = new Go();
WebAssembly.instantiateStreaming(fetch("wasm.php"), go.importObject).then(result => {
  go.run(result.instance);
});
</script>
</body>
</html>

　全画面表示する分には、iframeがいらなかったってオチです…　凄く、面白い。これなので、プログラミングは辞められない…