2010年02月08日

[Web][iPhone]携帯用サイトをとりあえずiPhone用に対応

携帯用に自分で作ったサイトをiPhoneのSafariでみると横幅が広く取られ、非常に小さく見えてしまう。

これはデフォルトで横幅が980pxとして処理されているためで、これを自分の指定したサイズにすればよい。

そのためにはmetaタグで
<META name="viewport" content="width=device-width"/>

のように指定すれば、iPhoneの横幅(縦向きなら320px、横向きなら480px)として処理される。
もちろん width=240px のように数値で直接指定することもできる。

ちなみにこのviewportのmetaタグでは横幅以外に
 initial-scale ページが読み込まれた時の拡大率
 user-scalable ユーザーが拡大縮小をできるか (yes/noで指定、デフォルトはyes)
 minimum-scale 拡大率の下限 (0〜10、デフォルトは0.25)
 maximum-scale 拡大率の上限 (0〜10、デフォルトは1.6)
の指定もできる。
例 : <meta name="viewport" content="width=320, user-scalable=no /">

またフォントサイズが自動的に調整されてしまう(小さくなる)らしく、これはstyleで
<body style=”-webkit-text-size-adjust:none”>

のようにすれば防ぐことができる。(iPhone独自のCSSプロパティ)

また自分で文字の倍率を指定することも可能。
例 : <body style=”-webkit-text-size-adjust:160%”>

とりあえずはこの対策で少しは見やすくなる。

参考サイト
iPhone 3G DevWiki : 画面表示関係
posted by goblin at 12:07| Comment(0) | TrackBack(0) | Web関連 | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。
この記事へのトラックバックURL
http://blog.seesaa.jp/tb/140563719
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。