スマホ表示が崩れる時の設定

PC用のサイトを製作の場合、スマホで見ると崩れていたり、文字が部分的に大きくなっていたりする。
これをスマホのサイズに合わせて表示させる時の設定。

まず文字を指定通りの大きさで表示させる場合は
css　bodyに

-webkit-text-size-adjust: 100%;

を追加する。
これはモバイル版ブラウザでのみ有効なプロパティらしい。

表示が崩れたり、左上部が大きく表示されたりする場合を防ぐには以下を追加。
＜ソリッドレイアウトの場合＞

<meta name="viewport" content="target-densitydpi=device-dpi, width=固定値, maximum-scale=1.0, user-scalable=yes">

＜リキッドレイアウトの場合＞

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, maximum-scale=1.0, user-scalable=yes">

viewportに関しては格好ややこしいので、勉強必！