2013年12月2日(月)
スマホ完全対応の第一歩 #■子猫の手

　スマホでは、画面が小さいことから、パソコンで見るより、文字は３倍、差し込み写真やアイコンは２倍大きいのほうがしっくり来ます。このことに気づいて、いろいろ試行錯誤しましたが、記述が複雑怪奇になるばかり。結局、viewportで指定する方法を採用しました。これで良し。

<metaname="viewport"
content="width=device-width">

　iPhone5cでは、ページの高さが短いと、表示幅を画面幅に合わせることができません。表示幅が320px～となります。『子猫の手』が表示幅480pxなので、initial-scaleプロパティをいじればいいのですが、そう簡単には行きませんね。ページを<br>などで長くしておくと問題回避できました。

　Androidスマホでは、target-densitydpiプロパティを設定すると良いとありますが、解像度が様々なので分岐処理しないといけないようです。今後の課題です。

　『子猫の手』で作成した、すべての公開ページが、スマホ対応となっています。作成ページは、今しばらくお待ちを。

P.S.新徳くんのAndroidスマホで試してみたところ、上手に表示されないところが、いくつかありました。結局、解像度ごとに設定を変えないといけないようですね。