iOSのsafariにおいてのCSSについて質問です。


自分はよくcssで min-width:3cm; みたいな実スケール指定をするのですが、
iPhoneでよくあるwidth=device-width; initial-scale=1.0;のようなmetaを指定したとしても、
実スケールとは異なるサイズで要素が描画されてしまいます。
(具体的には、2cm四方のボックスを表示させると1.3cm位で描画されてしまいます)
これを、上手く実スケールで描画させる方法はございますでしょうか。
よろしくお願いいたします。

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2014/03/20 15:51:16
  • 終了:2014/03/27 15:55:03

回答(2件)

id:language_and_engineering No.1

lang_and_engine回答回数170ベストアンサー獲得回数632014/03/20 19:26:19

ポイント50pt

CSSで指定したmmなどのサイズ絶対指定は描画時にピクセル変換されてしまい,画面上ではピクセル単位で描画処理されます。
「CSSで1mm」 = 「3.78px」という換算です。

※Webデザインの世界では,普通はこれを言い変えて,「CSSで1inch」 = 「96px」と言います。これは 1 インチ = 25.4 mm の換算で計算できます。


そして,1ピクセルを実寸で何mmとして描画するのかは,端末によって異なります。

CSSで1mm指定した長さを,端末上で実際に何mmとして表示するのかは,機種依存ということです。(気持ち悪いですね。)


例としてiPhoneで,CSSで2cm指定したボックスを表示する場合を考えます。

「CSSで1mm」 = 「3.78px」という換算なので,
「CSSで2cm」 = 「CSSで20mm」 = 75.6 pxという換算になります。

もし端末の画面の横幅が「(CSSピクセル数が)320pxかつ実寸50mm」のiPhone 4or5だと,
この75.6 px = 「実寸で11.8 mmで表示」になります。
(75.6/320 * 50 = 11.8)

よって,「CSSで2cm指定」 = 「iPhone 4or5だと実寸で11.8 mm表示」です。

質問文の「1.3cm位」は,この「実寸で11.8 mm表示」ではありませんか?


今後も機種のバリエーションは増えていきますから,全機種で固定長で表示するのは不可能ですね。
レスポンシブ&マルチスクリーンの時代の流れに合わせましょう。

※機種を1種類だけに絞れば,上の計算式を使って無理やり実寸表示できますが・・・


参考

The Lengths of CSS | CSS-Tricks
http://css-tricks.com/the-lengths-of-css/

  • 1cm == 37.8px

CSSで使用できる単位まとめ / hirok-k.com
http://www.hirok-k.com/blog/323.html

  • 1インチ=約2.54cm=96px

viewport と density について | 一番かんたんなJava入門
http://nobuo-create.net/viewport/

  • densityに基づいた 解像度

寸法と解像度のチートシート - いもす研 (imos laboratory)
http://imoz.jp/cheatsheet/length_resolution.html

  • iPhone 5/5S: 89mm × 50mm (4')。 iPhone 4/4S: 75mm × 50mm (3.5')
id:snow0214 No.2

snow0214回答回数470ベストアンサー獲得回数1162014/03/20 19:51:01

ポイント50pt

以下のメタ指定をすると、

<meta name="viewport" content="width=device-width, initial-scale=1.0">

iPhoneではディスプレイの横幅=320px共通になります。
単位はpxで指定してみてください。

viewport と density について

http://nobuo-create.net/viewport/

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません