> > iPhoneにスケールを合わせる1行

2009年8月24日月曜日

iPhoneにスケールを合わせる1行 

ひとまず、昨日使用出来るようになったusamimi.infoにindexページを作成。
本当にリンクのみですが、ひとまずはこのままで。

さてそのindexページですが、問題が一つ。
iPhoneで覗いて見ると、このように表示されます。

ページの余白まで見てしまい、文字が小さく表示されます。
この小ささでは、ピンチイン(2本指で広げる動作)をしてズームしないと、見るのが難しいです。

そこでこの1行。

view source
print?
1.<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>


view source
print?
1.<meta name="viewport"
2. content="width=device-width,
3.  initial-scale=1.0,
4.  maximum-scale=1.0,
5.  user-scalable=0
6. "
7./>
こちらのサイトを参考にしました。
meta の viewport - ZeBeVogue別館

<meta>タグでname「viewport」を宣言すると、iPhone専用になります。
widthで宣言している「device-width」は、携帯端末用に用意された値らしく、iPhoneでは320pxになります。
300など、普通の数値を割り当てても良いですが、ここでは手っ取り早くしています。
「initial-scale」は初期拡大率で、これもそれ以外でもOKです。
「maximum-scale」は最大拡大率、その反対の「minimum-scale」もありますが、
拡大を許可する「user-scalable」が0なので、拡大縮小が出来ません。

この1行を<head>内に書くだけで、見やすさがグンと上がります。

もうこれだけで、リンク集とかに使えるさっぱりしたページになりますね。
投稿者 ほるめす 時刻: 23:24
カテゴリ: , ,

0 件のコメント:

コメントを投稿