← Back to list
INS-428
戦闘領域調整
StatusDone
TeamInstansys
Assigneeyasuhisa.hiraga@instansys.co.jp
PriorityHigh
Created2026/02/20 03:35
Completed2026/03/02 05:37
Archived2026/03/10 02:31
Description
- 戦闘領域はiphone15とかを基準にして 画像は下に合わせる
- 空（上）に余白を取る
- 背景画像は戦闘領域よりも大幅に大きく作る（ipadをカバーできるくらいの正方形のサイズ,4:3比率。空多め）
- ipadの場合とiphone場合でよしなにみえるものを作る
Comments (6)
yasuhisa.hiraga@instansys.co.jp2026/02/20 03:42
iPhone17
2,622 x 1,206ピクセル
論理解像度（CSSピクセル） 874 x 402
yasuhisa.hiraga@instansys.co.jp2026/02/20 03:46
もっとも正方形に近い比率（4:3）
現行の多くのiPadはこの比率を採用しています。横にした時の「横：縦」が 1.33 : 1 となり、もっとも正方形に近いです。
- iPad Pro（11インチ / 12.9インチ / 13インチ）
- iPad Air（10.9インチ / 11インチ / 13インチ）
- iPad（第9世代・第10世代など、無印モデル）
yasuhisa.hiraga@instansys.co.jp2026/02/20 03:55
iPhone15
- 画面サイズ: 6.1インチ（対角線）
- 解像度: 2,556 x 1,179ピクセル
- アスペクト比: 19.5 : 9
- 論理解像度: 852 x 393
yasuhisa.hiraga@instansys.co.jp2026/02/20 04:50
[バトル画面サイズの調整]
- BattleBackground を pixistageから切り離し、pixiStageの後ろに来るようにする
- pixistageの画面比率を 19.5:9 にして、固定する。
- pixistageの比率を固定したまま、画面のbottom:0に合わせ、中央に表示する。どんな画面比率でもpixistage全体が表示されるようにする。
- BattleBackgroundの背景画面もbottom:0に合わせ、中央に表示する。object-fit:coverなどでアスペクト比を保ちつつ、全画面を覆うようにする。
yasuhisa.hiraga@instansys.co.jp2026/02/20 05:28
実装後の、実際の表示
Galaxy z Fold 5 (882 x 344 )
iPad Pro (1366 x 1024)
iPhone14 pro max(932 x 430)
yasuhisa.hiraga@instansys.co.jp2026/02/20 06:13
横長端末は左右を黒帯