html>headの中に、以下のタグを入れると、横スクロールが出ないようになります。
<meta name="viewport" content="width=320, height=480, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes" /> |
また、maximum-scaleを2.0とかにすると、ユーザ側で2倍まで拡大させる事が可能になります。
contentのwitdh,heightでは画面の仮想的な幅、高さの指定を行います。
width=320という表記を見ると、表示が320pxの低解像度になるのでは? と思われるかもしれませんが、これは実解像度では有りません。
仮想的に320ピクセル幅と見なすというだけで、サイト内にこれより高解像度の画像がある場合はちゃんと綺麗に表示されます。640などの大きな値にすることも可能ですが、そうすると文字が小さくなりすぎて見づらいので、スマートフォン向けサイトでは320pxを指定する事が多いです。
関連記事
コメントを残す