画面サイズに関係なく、Phonegapアプリを同じ比率に維持するにはどうすればよいですか？

Question

私は最初のPhonegapアプリを書いています。私は、画面サイズの違いに悩まされています。だから、私のアプリは携帯電話だけを対象としているので、私の理想的な解決方法はの仕事の仕組みを知っていると思うが、私はそれをどのように実装するのか全く知らない。

基本的には、ページ全体がイメージのように動作するようにします。画面が小さくなるにつれて同じサイズにして新しい行に折り返すのではなく、実際のフォントのフォントサイズを小さくして、デザインの間隔と比率をすべて維持したい。私はマージン、幅、フォントサイズなどを定義するためにパーセンテージだけを使ってみましたが、私が望むように正確には機能しませんでした。

Answer 1

デザインのフォントサイズ、スペース、および比率を縮小/縮小するイメージが必要な場合は、それに応じてメディアクエリを書き込む必要があります。

@media only screen and (max-width: 550px) { 
    .title { 
     font-size:11px 
    } 
    .body-box { 
     width:440px; 
    } 
} 

@media only screen and (max-width: 600px) { 
    .title { 
     font-size:12px 
    } 
    .body-box { 
     width:480px; 
    } 

} 

@media only screen and (max-width: 650px) { 
    .title { 
     font-size:13px 
    } 
    .body-box { 
     width:520px; 
    } 
} 

これにもいくつかの欠点があります。非常に小さな画面表示や低解像度ディスプレイ（約350px）の場合、この比率を維持すると約7pxになり、そのサイズは小さすぎて読み込めません。誰かがQHDタブ（2160px）で見た場合、フォントサイズは44pxと非常に大きくなります。

あなたのようなアプリに対する長期的かつ完璧な解決策は、レスポンシブデザインを開始することです。

Bootstrapを使用してHTMLアプリケーションレイアウトのデザインを開始できます。これは応答性とモバイル性があり、レイアウトを維持します。

そうでなければ、onsen.ioフレームワークを使用できます。これは、CordovaとPhonegapの応答性の高いHTML5フレームワークです。