CSSの実寸サイズについて

謎のプリン語る。
プログラミングの役立つ情報とか、どうでもいい雑談とか書いてます。
一人書く人増えました。

CSSの実寸サイズについて

みやびプリン 500 316

500 320

CSSの実寸サイズについて - サムネイル

※この記事は6年以上前の記事です。
現在は状況が異なる可能性がありますのでご注意ください。

どうも、
車買おうにも、駐車場が見つからないみやびです。
ほんと、見つからないんだよ、誰か探して・・・。

さて、表記の件。
現在、僕は、ある案件で、Web上で実寸表示っていうのに挑戦しているのですが、
これまた、ひどく難しく、
ディレクターさんが見つけた、下記のサイトの方法しかないっぽいという結論に達しそうです。

オンライン定規 - ULTRAZONE
モニター画面に正確な原寸大/実物大を表示

それぞれ、基準をユーザーに指定してもらう方法です。

実は、IEだと、dpiの理論値を取得できるんですが、
他のブラウザではなぜか存在しない・・・。
しかし、なんとか自動でできないか、って探していたところ、
CSSのinという単位を発見した。
1インチの大きさを表示するっていう単位です。
これ使えばいけんじゃん!と思いました。
あるサイトでは、この単位のブロックの画面上のピクセル数との比率から、
dpiを取得しているサイトがいくつかでてきたのだ。
dpiわかればこっちのもんだ!
(Web上ではdpi=ppiみたいなもんだし)

と喜んだのも束の間。

なんと、MacbookのRetinaでは、22mm前後、
iPhoneでは、15mm前後の実寸だった。
(1インチは、25.4mm)

全然1インチじゃないじゃーーーーん!!!

というか、全部96pxになりました。
そう、この単位、Webというかディスプレイが、96dpiであることが前提なのだ。

それもそのはず、CSSが策定されたころからの単位だし、
その頃のディスプレイは、99.9%、96dpiだったのだから。
(macは72dpi)

CSSには他にも、

  • cm
    ...まんまcm。96dpiでは、約37.8px
  • mm
    ...まんまmm。96dpiでは、約3.78px
  • pt
    ...1/72inch。96dpiでは、約1.3334px
  • pc
    ...12pt。96dpiでは、約16px

といった実寸単位が存在するが、
全部96dpiであることが前提である。

もう、ぬかよろこびさせんなよ・・・。
というか、頼むから、モニターの実寸取れるようにしてくれーーー!!!!

なんかいい方法ないか・・・。
やはり、あらゆる人がお手上げしてるのにはわけがあったか・・・。

トラックバック(0)

トラックバックURL:

コメントする

ページトップへ戻る