1. レスポンシブデザインを導入した時につまずいた…
こんにちは、久しぶりの投稿です。
またまたやらかしました。まだWebを触って１年なのですが、いままでデスクトップで動くことを前提としたアプリケーションばかり作っていました。
この度、会社の仕事とは別件でサイトを作ることになり、レスポンシブデザインに対応しようと調べて、試行錯誤しながら作っていったわけです。
どうもCSS側で
@media screen and (min-width: 640px) {
}
みたいなコードを書けば動くみたいだ！！と思って、書いたんですが玄人や初心者のかたでも「いやこれだけじゃ、動かないんだなー」と思っている方はその通り。これだけでは動かないんですね。
実はhtml側でも、あるコードを挿入してやる必要があるみたいです。それを今回、備忘録的に書きます。
動かなかったと書いていますが、もちろん全く動いていなかったわけではありません。サイトが思っていた挙動と異なる挙動を示したということです。
どのような挙動になったか、具体的に写真を添付することが今のところできないのですが、デスクトップのサイトがそのままスマホでも表示されたので、重いし見難いという最悪なサイトが出来上がってしまったのです。
2. 動かなかった原因
動かなかった原因は、スマホのブラウザソフトに「僕のサイトは、あなたのデバイスの画面サイズに合わせるよー」と教えなかったことが原因です。
3. じゃあ、どうするの？
「僕のサイトは、あなたのデバイスの画面サイズに合わせるぞ！」ということを、どこで教えるかというとhtmlのhead要素で教えます。
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
これで何が変わるかというと、私のサイトのwidthはあなたのデバイスのサイズに合わせます。その初期の倍率（CSSで扱う1pxと画面のサイズにおける1pxの比率）は１ですよということを、デバイスのブラウザに教えてあげるのです。
そうすることで、一生懸命書いたレスポンシブデザインに適応されるcssが読み取られます。
4. おまけ
viewportのcontentの中身は、様々なパラメータがあります。以下のサイトを参考にしてみてください！
http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho
5. 参考サイト
6. 質問やご意見などなど
質問やご意見、「ここ間違ってるぞコラ！」みたいなのがあれば、以下のメールアドレスまでメールいただけると喜びます。
この記事にコメントつけてもらってもOKです！
よろしくお願いします。
akira.kashihara@a-dawn.net
7. 改訂記録
2016年2月2日 新規記入、タイトルのミスを修正（挿入→導入）
2016年2月4日 読者の方から頂いた修正を反映（コードの色を表示）