ブラウザとデバイス
ブラウザが答えてくれることと、答えないことにしたことの境目を触ります。
画面の大きさも、動く機能の一覧も、聞けばブラウザは答えます。ところがその答えの組み合わせ自体が、あなたを見分ける手がかりになります。だから、あとから答えないことにした項目があります。電池の残量がそうで、WebKit は「指紋の懸念があるので実装しない」と名指しで書きました。クッキーも、JavaScript から読めるのは名前と値だけで、期限などの属性は取れません。
いまの決まりの多くは、過去のいきさつでそうなっています。どのブラウザも名乗りの先頭で Mozilla を名乗り続けているのが分かりやすい例で、古い判定に合わせ続けた結果、名乗りから中身が読めなくなりました。何が取れて何が取れないかを実際に見ると、名乗りで機種を判定しない、という作法の理由まで見えてきます。ここで調べた結果は、お使いのブラウザの中だけで処理します。
この分野の道具（8本）
- 対応機能の一覧この一覧の組み合わせ自体が、あなたを見分ける手がかりになります
- 画面の大きさカタログの解像度と違う数が出る理由。掛け算の式ごと出します
- 保存された中身見えるのはこのサイトのぶんだけ。Safariは7日で消します
- さわった場所指かペンかマウスかが分かります。Touchではなく Pointer を使う理由も説明します
- ブラウザの名乗りどのブラウザもMozillaを名乗ります。UAで判定しない作法まで説明します
- Cookieが見えない訳document.cookie は名前と値しか返しません。属性は取れません
- 電池残量が消えた訳WebKitが「指紋の懸念で実装しない」と名指しした機能の話
- つながっているかnavigator.onLine が true でも、ネットに出られるとは限りません
境目の外は、そもそも見えないようにしてある
あるページから読み書きできる保存領域は、原則としてそのページの生成元（オリジン）のものだけです。プロトコル・ホスト名・ポートの3つが1つでも違えば別のオリジンで、中身は見えません。これが同一生成元ポリシーと呼ばれる、ブラウザの安全の土台です。
だから「保存された中身」を見る道具は、いま開いているページのぶんしか出せません。制限のように見えますが、これが無ければ、たまたま開いたページから他のサイトのログイン状態まで読めてしまいます。触ってみると、できないことのほうに理由があるのが分かります。
画面の大きさは、1つの数字では言えない
同じ端末でも、CSS が見ている画素と、画面に実際に並んでいる画素は違います。その比が devicePixelRatio で、高精細な画面では2や3になります。「幅390」と出ていても、実際にはその2倍3倍の点が並んでいる、ということが起きます。
使える高さも、ブラウザの帯やキーボードの出し入れで刻々と変わります。高さを 100vh で決め打ちすると、スマートフォンで下が隠れることがあるのはこのためです。測ったその瞬間の値だということを忘れると、あとから崩れます。