スマフォアプリ作成2:画面レイアウト時の注意 | Hello, Stupid World!

Hello, Stupid World!

いろいろとメモ代わりに書いていきます。

画面を作っていく中での注意点です。


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!-親の高さ指定無し


 高さを指定するにはhtmlタグやbodyタグをheight100%と指定すること
 で高さが指定通りになります。

 Hello, Stupid World!-親の高さ指定有り