ひとまず、昨日使用出来るようになったusamimi.infoにindexページを作成。
本当にリンクのみですが、ひとまずはこのままで。
さてそのindexページですが、問題が一つ。
iPhoneで覗いて見ると、このように表示されます。
ページの余白まで見てしまい、文字が小さく表示されます。
この小ささでは、ピンチイン(2本指で広げる動作)をしてズームしないと、見るのが難しいです。
そこでこの1行。
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="viewport"
content="width=device-width,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0
"
/>
こちらのサイトを参考にしました。
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>内に書くだけで、見やすさがグンと上がります。
もうこれだけで、リンク集とかに使えるさっぱりしたページになりますね。
投稿
0 件のコメント:
コメントを投稿