作品の仕組み 2026-09-08
画面が実寸の定規になる仕組み ― ppiとデバイスピクセル比で「1ミリ」を計算する
スマホ定規は、なぜ画面に本物と同じ長さの目盛りを出せるのか。1ミリが何ピクセルかを決める式、なぜブラウザは画面の物理サイズを教えてくれないのか、機種判定と118機種ページの理由、OSの拡大表示でズレる仕組み、クレジットカードで補正する方法。作品の裏側を書きます。
この記事の位置: AIが作り、コードが検分する → 送らない（端末の中で完結する） → [数字と実寸] → 教材の設計
公開して一週間目に、「iPhone 14で測ったら、10センチが10.4センチになる」という問い合わせが来ました。4パーセントのずれ。ppiもDPRも公称値どおりに持っていて、計算は合っている。原因は、設定の「画面表示の拡大」でした。拡大表示にするとDPRは3のまま、論理解像度が変わり、ブラウザが返す数字と実際の画面の対応がずれる。この記事は、「ppi ÷ 25.4 ÷ DPR」という一つの式が、なぜ式だけでは足りないかの話で、その4パーセントから始めます。
スマホ定規は、画面の右端に実物大の目盛りを表示するだけの作品です。仕組みは一つの式に尽きます。「1ミリメートルは何ピクセルか」を機種ごとに求めて、その間隔で線を引く。ここでは、その式と、式だけでは足りない理由を書きます。
画面の物理的な細かさは ppi（1インチあたりのピクセル数）で表されます。iPhone 15なら460ppi。1インチは25.4ミリなので、460÷25.4で、1ミリあたり約18.1個の物理ピクセルがあります。ところがブラウザが扱う「ピクセル」は、この物理ピクセルではありません。CSSピクセルという論理的な単位で、iPhone 15では物理ピクセル3個分を1CSSピクセルとして扱っています。この倍率がデバイスピクセル比（devicePixelRatio、DPR）です。したがって、1ミリあたりのCSSピクセル数は「ppi ÷ 25.4 ÷ DPR」。iPhone 15なら460÷25.4÷3で約6.04ピクセル。この間隔で目盛りを描けば、画面上の1ミリが本物の1ミリになります。
問題は、ブラウザが ppi を教えてくれないことです。DPRはJavaScriptから読めますが、画面の物理サイズや ppi を返す標準的な方法はありません。CSSには「1in」や「1mm」という単位がありますが、これは「96CSSピクセル＝1インチ」と決め打ちされた名目上の値で、実際の画面の大きさとは一致しません。そこで、機種ごとの ppi を自分で持つ必要があります。スマホ定規が118機種ぶんのページを用意しているのは、この ppi と DPR の組み合わせを機種ごとに確定させるためです。iPhone SE（第3世代）は326ppi・DPR 2で1ミリ約6.42ピクセル、iPhone 15は6.04ピクセル。同じ「1ミリ」でも、機種が違えば引く間隔が違います。
| 機種 | ppi | DPR | 1mmあたりのCSSピクセル | 画面の物理サイズ（表示領域） |
|---|---|---|---|---|
| iPhone 15 | 460 | 3 | 約6.04px | 約65.1×141.1mm |
| iPhone SE（第3世代） | 326 | 2 | 約6.42px | 約58.4×103.9mm |
| iPad（第10世代） | 264 | 2 | 約5.20px | 約157.8×227.1mm |
本体ページ（/ruler）では、画面の論理解像度（幅×高さのCSSピクセル）とDPRの組み合わせで、機種の表を引いて推定します。iPhoneは機種ごとに解像度が決まっているので推定しやすく、Androidは同じ解像度・DPRの機種が多いため、推定が外れることがあります。同じ組み合わせに機種が複数あるときは、一度だけ機種を選んでもらいます。そのため機種別ページでは推定をせず、そのページの機種の ppi を固定して、DPRだけを実行時に読み直す方式にしています。
それでもズレる原因が二つあります。一つはOSの「画面の拡大表示」や「文字サイズ」の設定です。表示を拡大すると、ブラウザが返す論理解像度やDPRが公称値から変わり、機種の表と合わなくなります。スマホ定規は、表に無い組み合わせのときは機種を決めつけず、カードや硬貨で補正する画面を開きます。もう一つは、ppi の公称値そのものの丸めです。メーカーが公表する ppi は整数に丸められていて、実際の値と0.5パーセント前後違うことがあります。10センチで0.5ミリ程度の差です。
ズレを利用者側で直す手段として、クレジットカードによる補正を付けています。クレジットカードやキャッシュカードの大きさは国際規格（ISO/IEC 7810のID-1）で横85.6ミリと決まっているので、画面に当てて枠がぴったり重なるまでスライダーを動かせば、その端末の本当の「1ミリ」が求まります。補正値は端末のブラウザに保存され、次回からその値で描画します。
横向きで使うと、画面の長辺が定規になり、iPhone 15なら約14センチまで測れます。このときの回転は、目盛りだけでなく本文ごと一つの箱に入れて回す方式にしています。目盛りだけを回すと、本文の余白計算が縦横で食い違って重なりが出る、というバグを実機で踏んだ結果です。細かい話ですが、作品の見た目の大半はこうした失敗の記録でできています。
直した順に書きます。一つ目は、拡大表示の扱いです。DPRだけでなく、画面の論理解像度（screen.widthとscreen.height）も実行時に読み、機種の表と照らします。iPhone 14の標準表示は390×844、拡大表示では320×693。拡大表示のときは表の組み合わせと一致しないので、標準表示の機種の値で描いてずれを出すことはせず、最初からカードや硬貨で補正する画面を開くようにしました。
二つ目は、クレジットカード補正の精度です。85.6ミリの枠をスライダーで合わせるとき、スライダーの刻みを最初は1パーセント刻みにしていましたが、1パーセントは85.6ミリで0.86ミリ、カードの端を目で合わせる精度より粗い。0.1パーセント刻み（85.6ミリで約0.09ミリ）に変えました。補正後の精度を、実物の金属定規で確かめると、iPhone 15とiPhone SE（第3世代）で、10センチに対して0.2ミリ以内。工作や採寸の目安として、ここまで出れば足ります。
三つ目は、Androidの機種推定の外れ方です。ある機種で、ユーザーエージェントと論理解像度から別の機種と推定され、ppiが約5パーセント違う値で描かれていました（推定した機種が411ppi、実機は393ppi）。本体ページの推定は当てにならない機種がある、と本文に書いたのはこの件で、機種別ページを118機種ぶん用意して、推定を使わずにppiを固定する、という方式の理由です。本体ページには、推定した機種名を表示し、「違う機種なら、こちらから選び直す」の案内を置きました。
正確さについて正直に書いておくと、スマホ定規は「工作や採寸の目安」であって、精密測定の道具ではありません。それでも、定規がないときにスマホがあれば1ミリ単位で長さが分かる。その用途には十分な精度が出るように、機種ごとの数値と補正の仕組みを組んでいます。
最初の問い合わせの「10.4センチ」は、カード補正で10.0センチになりました。一つの式で1ミリを決め、機種の表に無い表示（拡大表示など）では決めつけずに補正へ回し、それでも残る分を利用者のカードで埋める。三段構えです。「作品の見た目の大半は失敗の記録でできている」と本文に書きました。定規の目盛りの間隔も、その4パーセントの記録です。
執筆：長澤 湊（宅地建物取引士・行政書士・測量士補） 内容確認日：2026-10-03
この記事は制度と手続きの一般的な説明で、個別の事案についての法律・税務の相談や判断ではありません。制度や数字は内容確認日の時点のものです。ご自身の事案は、弁護士・司法書士・税理士・行政書士など、該当する専門家に確かめてください。