画面サイズの異なる端末への対応方法
こんにちは、サンプルアプリ開発者の山田健一です。
Android機は様々な 画面サイズが存在します。iUIを使ってデザインしていると多くの場合、iUIが対応してくれます。
たとえば、画面幅いっぱいのボタンは、画面が広くなっても画面幅いっぱいに表示されます。
但し、Galaxy Nexusのように高精細な機種はちょっと困ることがあります。
Galaxy Nexusの画面は縦置きにした状態で約6センチの幅に720ピクセル表示できます。一方ちょっと古い機種ですが、Galaxy Sは約5.2センチの幅に320ピクセル表示です。気持ち広くなるだけで、ピクセル数が2倍ですから、高精細であることが分かります。
この高精細が、アプリ開発者を悩ませる原因となります。
Monacaサンプルに登録してある
MonacaでTODOアプリを作る（localStorageを利用）
をインストールして表示状態を比較したのが次の写真です。
少々見づらいですが、高精細のため、画面が小さく表示されているのが分かります。
せっかくのアプリですから、多くの人に使ってもらいたいものです。多くの端末で快適に動作する為に、 screen.width で画面幅を取得して、画面幅が 600 以上だったら、高解像度対応を行うと言うコードを挿入します。
挿入する個所はアプリ起動時の処理を行うところになります。
CSSの zoom プロパティーを用いると拡大表示をしてくれます。
次のようなコードを挿入します。
//ウインドウの幅を取得
var screenWidth = screen.width;
//600以上はzoom指定
if (screenWidth >= 600) {
$("body").css("zoom","200%");
}
このコードを適用してGalaxy Nexus で見ると次のようになります。
具合がいいですね。
しかし、このzoom指定には副作用があります。画面を拡大表示していることになりますので、zoomを200％に指定した場合、screen.width や screen.height は論理的に2倍の扱いになります。
このアプリには panel の高さ調整のために次のようなコードが記述されています。
//パネルの高さ調整
document.getElementById("addForm").style.height =
(screen.height - 45) + "px";
document.getElementById("modifyForm").style.height =
(screen.height - 45) + "px";
zoom指定の副作用のため、パネルの高さが約 2 倍になってしまい、画面を下にスクロールしていくと、不要なブランク領域が表示され、入力領域が隠れてしまいます。
実際の図を次に示します。
この現象を回避する為には、zoom を200％に指定しているときは、画面の高さを1/2にする必要があります。
また、Android4.0ではscreen.heightに上部の通知領域の高さや、下部のソフトキーの高さも含まれているため、配慮が必要となります。
そのためのコードは次のようになります。
そのほか、図の幅を screen.width に揃えるなどのコードがあった場合は、同様に考慮が必要になります。
ソースファイル、APKファイルは以下からダウンロードしてください。
