一般的なスマホサイトをつくろうとすると <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%; これがデフォルトではautoになっているため、文字が大きくなるのだが、ここを100%にすると自動調整を解除できる。 横向きへの対応さらに、Androidではこれだけでは足りないことがある。device-widthでデバイスの幅に合わせてコンテンツ
![スマホ・タブレットのviewport設定メモ | SHINGO IRIE](https://cdn-ak-scissors.b.st-hatena.com/image/square/21746f5852782b41c5b6be76ea2d2125a48367bc/height=288;version=1;width=512/https%3A%2F%2Firitec.jp%2Fwp-content%2Fuploads%2F2014%2F06%2Fsumaho.jpg)