モバイル対応
モバイルデバイス対応で使う基本的な設定方法をまとめます。
viewport の設定
ざっくり作ったサイトをスマートフォンで見ると、文字が小さく表示されてしまうことがあります。これを避けるため、まずはページのサイズを指定する viewport を設定します。
HTML の <HEAD> タグ内で meta タグを使い、ビューポートの設定をします。下の設定がよく使われるようです。
content の width を設定した場合、その横幅の仮想的なウインドウが作られると考えれば良さそうです。width に device-width を指定した場合、表示デバイスの解像度ではなく、いい感じに見える解像度が設定されます。スマートフォン程度のデバイスですと、320 や 480 程度の数値が入るようです。これで、文字が小さく表示されてしまうことを避けられます。
JavaScript でから取得できる値も、例えば
window.innerWidthなども設定された値を返します。（window.innerWidth については、コンテンツサイズが大きい場合はその値が返されました。）
initial-scale は、最初の表示倍率で、基本的には 1 を設定しておけば良いようです。
参考ある解像度以下の CSS を設定する
viewport を設定すると、モバイルデバイスでは狭い横幅が設定されるようになります。そこで、横幅の狭いときにもきれいに表示されるように、メディアクエリを使って横幅が狭いときのみに適用されるスタイルを記述します。
このスタイルを、通常スタイルのあとに記述します。記述したスタイルは、モバイルのみではなく、PC で画面が狭い場合（画面を狭くしていった場合）にも適用されます。
最小幅設定などを無効にする
PC 用に設定してしまった、min-width や max-width などを初期の状態に戻したい場合、initial を設定します。ただし、IE11 は未対応らしいので、auto も設定しておく必要があるようです。
width や height は、auto で良いようです。