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がいらなかったってオチです… 凄く、面白い。これなので、プログラミングは辞められない…