Unity/WebGL/画面縦横幅拡大
提供: 初心者エンジニアの簡易メモ
WebGLで出力されてたcanvasを100%にする方法
- http://corevale.com/unity/1636 にある以下の.webgl-content * {}スタイルシートで、TemplateData/style.cssを更新
- index.htmlに記載されてる縦幅横幅を100%に変更。
- 出力されたhtmlに以下記載されてることを確認
<link rel="stylesheet" href="TemplateData/style.css">
参考:http://corevale.com/unity/1636
リサイズ対応
canvas.style.width = "100%" 辺りのところを以下に変更
function loadWindow() { canvas.style.width = "100%"; canvas.style.height = (document.documentElement.clientWidth * 0.5625) + "px" window.setTimeout(resizeWindow, 5000); } function resizeWindow() { // 16:9 if (document.documentElement.clientWidth / document.documentElement.clientHeight < 1.7777) { canvas.style.width = "100%"; canvas.style.height = (document.documentElement.clientWidth * 0.5625) + "px" } else { canvas.style.height = "100%"; canvas.style.width = ((document.documentElement.clientHeight - 20) * 1.7777) + "px" } } window.addEventListener('resize', resizeWindow); window.addEventListener('load', loadWindow);
右に表示されてしまうのを中央表示に変更する方法
TemplateData/style.css
body { text-align: center; }