1.viewportの指定
viewportとはスマートフォンで表示する画面サイズ、操作に関する
設定項目です。
content属性内でさまざま値を設定します。
例)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
それぞれの項目について説明します。
・width 横幅です。
「device-width」によりデバイスいっぱいを使っています。
・initial-scale 最初の拡大度です。
・maximum-scale 拡大できる最大率です。
・user-scalable 拡大を許可するかです。
「0」を指定する事で拡大を禁止してます。
2.リキッドデザイン
リキッドデザインとは%による大きさの指定です。
解像度がさまざまなスマートフォンアプリケーションでは
リキッドデザインが常識になります。
特に各項目を画面横いっぱいに広げた1カラムのリキッド
デザインが多いです。
3.縦幅の指定
通常、divタグなどをheightで高さ指定しても反映されません。
これはその親であるbodyやhtml自身が内部の高さにより自動的に
決定されてしまう為です。
![Hello, Stupid World!-親の高さ指定無し](https://stat.ameba.jp/user_images/20130307/22/trap-z/f1/0b/p/t02200149_0555037512448043187.png?caw=800)
高さを指定するにはhtmlタグやbodyタグをheight100%と指定すること
で高さが指定通りになります。
![Hello, Stupid World!-親の高さ指定有り](https://stat.ameba.jp/user_images/20130307/22/trap-z/07/65/p/t02200148_0555037412448043188.png?caw=800)