スマホサイトの要点

自分のメモとして残していきます。

スマホサイトを作ることになったため、独自で調べながら気になったことを書いていきます。

スマホサイトを作るために必要なものたち

1.viewportとinitial-scale,user-scalable

表記例

<meta name="viewport" content="width=device-width,

initial-scale=1.0,user-scalable=yes" />

viewportは画面のサイズに合わせてコンテンツを設定してくれます。

特別な設定が必要なければdevice-widthと設定しましょう！

initial-scaleとは初期時に表示するスケールを設定する。という意味。

通常は1.0でOK！

user-scalableとはユーザーによるピンチイン・ピンチアウト操作を許すかどうかを

指定する。yesで許可。noで非許可。

このほかにも必要とあらば入れるものはあるようなのですが、最初に作る段階では、

ひとまずこれでOKかと。

2.CSS3のメディアクエリー

表記例

@media only screen and (max-width:480px)and (min-width: 300px){

}

メディアクエリーとは、そもそもCSS2の時からあったMedia Typeの拡張だそうです。

CSS3になったMedia Queryはデバイスの仕様に応じて、スタイルシートの振り分け

指定できるようになりました。

表示例はwidthが300px～480pxの時に発動するスタイルシート。

これも書き方はいろいろあるようです。

アイコンの配置なんかの時に必要ですね。スマホの縦向きは2×3。横向きは3×2でアイコン

を置きたいとき、メディアクエリーを使わず、パーセンテージ指定で置いただけでは配置

がおかしくなってしまう。

そんなとき？のメディアクエリー！！

/*****************/

スマホについてはまだいろいろ書かなきゃいけないことがあるのですが、

また次回にします。