0

質問: クロスプラットフォーム ツールを使用して開発されているモバイル アプリの場合、モバイル アプリで合理的にレンダリングできる列数をどのように判断しますか? たとえば、特定のビューのレイアウトに余分な列を配置できるかどうかを判断する方法は?

ノート：

IOS/Android デバイスが混在し、解像度が異なり、ポートレート/ランドスケープの場合、答えは画面の物理的な寸法にありますか? 画面の幅をピクセル単位で使用することは、画面の物理的な大きさを示していない可能性があるため、適切ではない可能性があると思います。

たとえば、議論のために、データを列に表示するアプリケーションがあり、ユーザーの読みやすさのために次のように判断したとします (これらは作成しています)。

  • iPhone ポートレート - 1 列
  • iPhone 横向き - 2 列
  • iPad の縦長 - 2 列
  • iPad 横向き - 3 列

ただし、iPad/iPhone 以外にもすべての Android デバイスがあるため、ここでは、ユーザーに表示しようとする列の数を実行時に決定する式/アプローチが必要であると仮定します。

したがって、Corona SDK、Phone Gap、Titanium、MoSync などのクロスプラットフォーム開発ツールを使用していることを前提としています。

4

2 に答える 2

2

デバイスの画面サイズと列のサイズを考慮するときは、密度に依存しないピクセルを使用する必要があります。

私は自分のアプリの 1 つであるHoustersでこれと似たようなことを実際に行っています。（私の回答を視覚化したい場合は、Google Playストアにアクセスしてください。）使用できる可能性のある製品の広がりを示しているため、疑似コードで回答します。

まず、タブレットかどうかを判断します。これは最近ではかなり恣意的ですが、次の式がうまく機能します。

var isTablet = Math.min(platformWidthInDP, platformHeightInDP) > 500;

これは、Nexus 5、EPIC 4G、EVO 4G、Galaxy S3、およびテストしたその他のものを電話として、Nexus 7/10、Tab 7+/10、およびその他のものをタブレットとして正しく識別します。

電話の場合、向きに関係なく、常に 1 列を使用します。特にキーボードが上がっているときは、横向きで押しつぶされすぎていました.

タブレットの場合、列が画面にうまく収まるように、比較的望ましい幅を計算します。画面の最小サイズを 2 で割り、少なくとも320dp幅が広いことを確認します (列の内容によっては、より小さな値を許容できる場合もあります250dp)。

var minPlatformWidth = Math.min(platformWidthInDP, platformHeightInDP));
var width = Math.max(minPlatformWidth / 2, 320);

このようにして、画面サイズにさまざまなバリエーションがある場合でも、私の列は画面いっぱいにうまくサイズ調整されます。また、それらは静的なサイズであるため、ユーザーがデバイスの向きを変えても、あまり巧妙な操作が行われることはありません。

于 2014-03-08T06:49:14.913 に答える
1

WebView を使用しているため、JavaScript を使用してそれを行うのをやめて、レスポンシブ Web デザインのはるかに簡単な (習得したら) ソリューションを使用できます。

たとえば、これを参照してください: http://responsivedesign.is/develop/css/css3-multiple-columns ブラウザのサイズを変更します。ブラウザー ウィンドウを短くすると、列の数が 3 から 2 になり、2 から 1 になります。

または、次の例を見てください: http://www.greenpeace.de/ 再び、ブラウザ ウィンドウの作成を開始すると、デザインが変更されることがわかります。

これは css のみで発生しており、アプリケーションにとってははるかに軽量です。

于 2014-03-08T10:59:26.793 に答える