基本的な設定など

css iphone

CSSをiPhone向けに切り替える

  • CSS 3のメディアクエリというのを利用して、画面の横幅が480px(iPhoneを横にしたときの最大サイズ)以下になった場合にiPhone用のCSSに切り替えるような設定ができるよ。
<!-- iPhone 用だよ -->
<link media="only screen and (max-width:480px)" href="iphone.css" type="text/css" rel="stylesheet" />
<!-- PC 用だよ -->
<link media="screen and (min-width:481px)" href="pc.css" type="text/css" rel="stylesheet" />
<!-- メディアクエリをIEが無視するので、IE用に別途PC用CSSを指定するよ -->
<!--[if IE]>
<link rel="stylesheet" type="text/css" href="pc.css" />
<![endif]-->

viewportの設定でiPhoneからの操作をしやすくする

  • metaのviewportっていう属性を設定することで、iPhone(Safari)の表示領域の挙動を操作できるよ。
    • 縮尺の設定や、ユーザーに拡大縮小の操作（iPhoneだとピンチイン/アウトとかだね）をさせるかなどの設定があるみたい。
    • iPhoneに最適化したページを作る場合、ピンチイン/アウトをオフにしたほうが操作性が上がる場合があるかも。
<meta name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
HolyGrail

viewportに

maximum-scale=0.6667

を設定して、画面を縦画面（portraitっていうらしいよ）と横画面（landscapet）で文字サイズが変わらないようにするっていうハックらしいよー

その他

viewport自体の仕組みについてはこの説明がわかりやすかったかも。

Safari on iPhone/iPod touch が通常のウェブブラウザと違うのは、ウインドウを持たないことです。そこで、この viewport という概念が出てきます。

viewport というのは仮想的なウインドウのサイズだと思えばいいでしょう。デフォルトでは、980 ピクセル幅となっています。viewport の値は最小 200 ピクセルから、最大 10,000 ピクセルを取ることができます。

何も設定されていない素のウェッブサイトを Safari on iPhone/iPod touch で見た場合、980 ピクセル幅のウインドウでブラウズした状態になるわけです。

http://travel-lab.info/tech/pblog/article.php?id=157

どうでもいいけどダイアリーはてブテーマ、引用のデザインしてなかったみたいだね…