PhoneGapで画面を固定化する
PhoneGapで制作していて速攻で気になるのが画面のスクロール。以下の図の様に画面の上下が画面外にスクロールできる。
これを固定化するにはどうすれば良いかというと、Stack Overflow に対応方法が載っていた。
Phonegap vertical scroll – Stack Overflow
・CSSの追加
念のためCSSに以下の記述を追加。
html, body {
margin: 0;
padding: 0;
height: 100%;
overflow: hidden;
}
・metaタグのviewportを変更
viewportを以下の様に変更する。
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, width=device-width" />
・config.xmlを変更
プロジェクトディレクトリ内にある「config.xml」を開き、DisallowOverscrollをtrueに書き換える。
<preference name="DisallowOverscroll" value="true" />
以上で画面外にスクロールできないようになる。
