はじめに
2024年6月に仕様変更で、Discord側でのアスペクト比の固定仕様が無くなりました
Discord Activityの開発で表示領域のアスペクト比に関する記載が見つからなかったので調べて見ました。
結果
概ね 16:9 でした。
以下解像度1920*1080 の16:9のディスプレイで表示した、横サイズを16に固定したアスペクト比の調査表です。
| 表示種類 | 横サイズ | 縦サイズ | アスペクト比 |
|---|---|---|---|
| 通常表示 | 1063 | 598 | 16 : 9.0009 |
| 通常表示_メンバー表示なし | 1134 | 638 | 16 : 9.0017 |
| フルスクリーン表示 | 1173 | 661 | 16 : 9.0161 |
| ウインドウ最小表示 | 352 | 198 | 16 : 9 |
| ウインドウ最小表示_メンバー表示なし | 423 | 238 | 16 : 9.0023 |
調査内容
表示領域サイズを表示するHTMLを作成し、Discord Activityに表示しました。
表示領域はwindow.innerWidth,window.innerHeightとしました。
通常表示
通常表示_メンバー表示なし
フルスクリーン表示
ウインドウ最小表示
ウインドウ最小表示_メンバー表示なし
以下使用したHTMLのコード
<!DOCTYPE html []>
<html>
<body>
<h2>Window Size</h2>
<p id="screen"></p>
<p id="window"></p>
<p id="page"></p>
<script>
//ウインドウのリサイズ時の処理
function windowResizeEvent(){
var timeoutId = 0;
const resizeDelay = 300; //リサイズが完了したと判断する時間
window.onresize = () => {
clearTimeout(timeoutId);
timeoutId = setTimeout(()=>{
viewWindowSize();
}, resizeDelay);
};
}
function viewWindowSize(){
const screenWidth = screen.width;
const screenHeight = screen.height;
const screenAspectRatioWidth = 16;
const screenAspectRatioHeight = screenHeight * screenAspectRatioWidth / screenWidth;
const windowWidth = window.innerWidth;
const windowHeight = window.innerHeight;
const windowAspectRatioWidth = 16;
const windowAspectRatioHeight = windowHeight * windowAspectRatioWidth / windowWidth;
const pageWidth = document.documentElement.scrollWidth;
const pageHeight = document.documentElement.scrollHeight;
const pageAspectRatioWidth = 16;
const pageAspectRatioHeight = pageHeight * pageAspectRatioWidth / pageWidth;
const screenSize = document.getElementById("screen");
screenSize.innerHTML = "Display Size (screen) : width: " + screenWidth + ", height: " + screenHeight + ", aspect-ratio: (" + screenAspectRatioWidth +":" + screenAspectRatioHeight + ");";
const browserSize = document.getElementById("window");
browserSize.innerHTML = "Browser Size (window.inner) : width: " + windowWidth + ", height: " + windowHeight + ", aspect-ratio: (" + windowAspectRatioWidth +":" + windowAspectRatioHeight + ");";
const pageSize = document.getElementById("page");
pageSize.innerHTML = "Webpage Size (documentElement.scroll) : width:" + pageWidth + ", height: " + pageHeight + ", aspect-ratio: (" + pageAspectRatioWidth +":" + pageAspectRatioHeight + ");";
}
viewWindowSize();
windowResizeEvent();
</script>
</body>
</html>