アシアルブログ

アシアルの中の人が技術と想いのたけをつづるブログです

画面サイズの異なる端末への対応方法

こんにちは、サンプルアプリ開発者の山田健一です。

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ファイルは以下からダウンロードしてください。

ソースファイル

apkファイル(デバッグビルド)