さまざまなAndroid画面サイズ/密度のPhonegapアプリの拡大縮小ですか？

Question

私はAndroidの携帯電話とタブレットで動作するように設計されたPhonegapアプリを持っています。テキストと画像のスケールは電話では問題ないように見えますが、7インチのタブレットでは小さすぎます。

Phonegapベースのアプリケーションで使用できるさまざまな画面サイズ/密度の縮尺を設定する方法はありますか？ネイティブのAndroidアプリの場合、複数の画面レイアウト（に記載）が解決策ですが、これはPhonegapベースのアプリに使用できますか？

CSSのメディアクエリを使用して、画面サイズに基づいてフォントサイズを設定できますが、インターフェイス全体（画像を含む）を比例して調整したいと考えています。

Iは、絶対位置を特定の画面サイズを標的とするためにCSSをメディアクエリと共にzoomプロパティを使用して、このネジ試みなどiScrollなどのUI要素の機能に干渉する：

@media only screen and (min-device-width : 768px) { 
    body{ 
     zoom: 125%; 
    } 
} 
@media only screen and (min-device-width : 1024px){ 
    body{ 
     zoom: 150%; 
    } 
} 

私も使用しようとしましたtargetdensity-dpiメタビューポートプロパティ - 120dpiに調整すると、7インチのタブレットではスケールが改善されますが、電話では大きすぎます。これはむしろCSSよりもHTMLにハードコードされているので、メディアクエリは、画面サイズに基づいて、それを変えるために使用することはできません。

<meta name="viewport" 
    content="width=device-width, initial-scale=1, targetdensity-dpi=120dpi"> 

はここでテストケースのPhoneGapアプリからいくつかのスクリーンショットです：

• HTC HD2, target-density=default
• HTC HD2, target-density=120dpi
• Nexus 7, target-density=default
• Nexus 7, target-density=120dpi

Answer 1

ちょうど私はこれに決して答えませんでした。私が最後に使用したソリューションは、デバイスのサイズに基づいて、フォントサイズとイメージアセットを明示的に設定するためにメディアクエリを使用することでした。デバイステストでは、iPhone、iPad、Android搭載端末、Android 7「タブレット、Android 10」のすべてのターゲットデバイスでこれが動作していました。他の人に役立つことを願っています。例えば

：

/* Start with default styles for phone-sized devices */ 
    p,li{ 
     font-size: 0.9em; 
    } 
    h1{ 
     font-size: 1.2em; 
    } 
    button{ 
     width: 24px; 
     height: 12px; 
    } 
    button.nav{ 
     background-image: url('img/phone/nav.png'); 
    } 

@media only screen and (min-device-width : 768px) { /* 7" tablets */ 
    p, li{ 
     font-size: 1.3em !important; 
    } 
    h1{ 
     font-size: 1.6em !important; 
    } 
    button{ 
      width: 32px; 
      height: 16px; 
    } 
    button.nav{ 
     background-image: url('img/tablet7/nav.png'); 
    } 
} 
@media only screen and (min-device-width : 1024px) { /* 10" tablets and iPad */ 
    p, li{ 
     font-size: 1.5em !important; 
    } 
    h1{ 
     font-size: 1.8em !important; 
    } 
    button{ 
     width: 48px; 
     height: 24px; 
    } 
    button.nav{ 
     background-image: url('img/tablet10/nav.png'); 
    } 
} 

Answer 2

私が提案するさまざまなソリューションのカップルを持っている：動的にJavascriptを（more info here）レム単位ではなく、PXにすべてのサイズを設定し

を使用して

1. 変更ビューポート。次に、ドキュメントのフォントサイズを調整してすべてを拡大縮小することができます。例をスケッチ：我々はPhoneGapのをあきらめ

   function resize() { 
   var w = document.documentElement.clientWidth; 
   var h = document.documentElement.clientHeight; 
   var styleSheet = document.styleSheets[0]; 
   // ar = aspect ratio h/w; Replace this with your apps aspect ratio 
   var ar = 1.17; 
   // x = scaling factor 
   var x = 0.1; 
   var rem; 
   if (h/w > ar) { // higher than aspect ratio 
       rem = x * w; 
   } else { // wider than aspect ratio 
       rem = x * h; 
   } 
   document.documentElement.style.fontSize = rem + 'px'; 
   } 
   

Answer 3

前には、それを改善しようとすることができます。 このソリューションを使用して解決するまで私は立ち往生しました。

これにあなたのビューポートを変更し

：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" /> 

は参考：Phonegap Application text and layout too small

Answer 4

はピートルパージュ（https://plus.google.com/+GoogleChromeDevelopers/posts/BKHdSgQVFBB）による対象-densitydpiはを非推奨とWebkitのから削除されたことを考えてみましょう、私はより良いと思いますアプローチは、メディアのクエリを使用して、電話帳を削除する前に高dpiデバイスをターゲットにすることです。