人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

●質問者: shinp
●カテゴリ:コンピュータ ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● lang_and_engine
●50ポイント

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/

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

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

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


2 ● snow0214
●50ポイント

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

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

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

viewport と density について

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

関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ