◆ window のサイズとスクリーンサイズについて
◆ PC とモバイル端末で試したメモ書き

Windows

window.screen のプロパティ

availWidth: 1920
availHeight: 1050
width: 1920
height: 1080
colorDepth: 24
pixelDepth: 24
availLeft: -1920
availTop: 125
orientation: {
angle: 0
type: landscape-primary
}

height と availHeight が違うのはタスクバーのサイズ
これらはウィンドウサイズ問わないのでフルスクリーン表示にしても差が出る

availLeft と availTop はそのスクリーンのメインスクリーンからの相対位置

左側に FullHD サブディスプレイを置いてると availLeft は -1920 になる
サブスクリーンの一番上がメインスクリーンの一番上より少し下だと availTop は正の数でズレ分のピクセル
上の例はこういう配置

      ■■■■■■
■■■■■■■■(1)■■
■■(2)■■■■■■■■
■■■■■■

モバイル

iOS / Android は複雑
確認用ページ

<!DOCTYPE html>
<meta charset="utf-8" />

<pre id="c"></pre>

<script>
{
const getValue = name => {
const path = name.split(".")
let value = window
for(const prop of path) {
if(value == null) {
value = `[[Cannot access property of null/undefined @"${prop}"]]`
break
}
value = value[prop]
}
return value
}

const format = entries => {
const max_key_len = entries.reduce((a, b) => Math.max(a, b[0].length), 0)
return entries.map(([k, v]) => `${k}${" ".repeat(max_key_len - k.length + 1)}: ${v}`).join("\n")
}

const diff = (a, b) => {
const als = a.split("\n")
const bls = b.split("\n")
return als.map((e, i) => {
if (e !== bls[i]) return `- ${e}\n+ ${bls[i]}`
else null
}).filter(e => e).join("\n")
}

const update = () => {
const text = format(
[
"outerWidth",
"outerHeight",
"innerWidth",
"innerHeight",
"devicePixelRatio",
"screen.availWidth",
"screen.availHeight",
"screen.width",
"screen.height",
"screen.colorDepth",
"screen.pixelDepth",
"screen.availLeft",
"screen.availTop",
"screen.orientation.angle",
"screen.orientation.type",
].map(e => [e, getValue(e)])
)
if (c.textContent !== text) {
console.log(diff(c.textContent, text))
c.textContent = text
}
}

setInterval(update, 500)
update()
}
</script>

共通

devicePixelRatio は高解像度ディスプレイでの倍率
PC でも Suface などは 2 倍表示や 1.5 倍表示にしてることが多いはず
その時の倍率で 2 や 1.5 が入る

screen.width と掛け算すれば端末の物理ピクセル数がわかる

タスクバー的なものがないモバイル環境だと screen の width/height と availWidth/availHeight は一緒

innerWidth/innerHeight は outerWidth/outerHeight よりも大きいことがある
outerWidth: 768 なのに innerWidth: 980 とか

違う部分

iOS は screen.orientation がないので angle, type は取得できない

iOS の depth はどっちも 32
色が綺麗なだけある
Android は 24 だけど端末によっては 32 もある?

iOS の width/height と availWidth/availHeight は回転しても変わらない
メインの方向で固定
Android は回転すると width と height が入れ替わる

iOS も Android も outerWidth/outerHeight と innerWidth/innerHeight は回転に応じて変わる
iOS の outerWidth/outerHeight は width/height と一緒
Android では height は screen のよりも少し小さい
タブや URL のエリア分が引かれてる

画面分割

マルチアプリで画面分割した場合は試してない