自作のサイトをスマートフォンとPC両方で使えるよう、レスポンシブ対応しようとしました。
デザインはとりあえずそれなりの見た目になればいいのでBootstrap3を使い、グリッドシステム使えば画面幅によって表示を最適化してくれるんでしょってな感じで。
グリッド・システム ≪ CSS ≪ Bootstrap3日本語リファレンス
しかし、最適化されず、スマートフォンでみるとめっちゃ縮小して表示される。。。
正確には、tableタグ(を囲っているdivタグ)にtable-responsiveクラスを適用して、レスポンシブな表（画面幅で表示しきれない分は表の中で横スクロールして表示する）を表示したかったのですが、表がめっちゃ縮小して表示されました。
別に作っていたサイトはレスポンシブに表示されていて、「なんでやねん！」と一人突っ込みを入れていたのですが、HTMLをよくよく比較してみると、ただ単にmetaタグ1行抜けていたという結論に。。
スマホートフォンは PC 向けのサイトを表示するときには、「横幅 980px 向けにデザインされている」という前提で描画する。結果として、文字が小さくなる。
なるほど、それで横幅980px想定で幅いっぱいに表を表示してくれていたのね。
で、デバイスごとの表示幅に合わせて表示するには、以下をmetaタグに入れましょうと。
<meta name="viewport" content="width=device-width">
width=device-widthってのが「デバイスの幅で表示」を意味するわけですね。
なお、縦向け、横向けで文字の表示サイズなどを変更したくない場合には、以下のようにすればいいようです。
HTMLに以下のmetaタグを。
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
CSSに以下の指定を。
body {
-webkit-text-size-adjust: 100%;
}
これをやると表示サイズが固定されるのでスマホでの拡大縮小ができなくなるようですが、自分はスマホでの文字入力時に勝手に入力欄が拡大されてしまうのをこれを使って防ぐという利用の仕方をしています。
スマホで入力欄を選択したときに勝手に画面が拡大されたりするとイラっとします、よね？？
今日は以上ですー。
