PhoneGap、jQuery Mobile、Retina Display

Question

jQuery Mobileを使用してPhoneGapアプリケーションを作成しています。 現在のところ、私はiPhoneとiPhoneの網膜シミュレータでのみテストしています。

Retinaモードでアプリケーションを開くと、アプリケーションの密度は正しいですが、ページは両方のサイズで画面サイズの半分に過ぎません。

私の推測では、jQuery MobileのCSSは幅と高さを拡大しませんが、これについては何も見つかりませんでした。

私のHTMLは、このあります

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

をそして私はこのJavaScriptを実行します。

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
} 

私は何をしないのですか？

Answer 1

あなたは正しいと思います。

JQM.cssファイルを見てください。

高解像度/低解像度のアイコンのメディアクエリのみが含まれています。他のすべては、網膜および非網膜デバイス上で「そのまま」であるため、JQMはアイコンサイズに関して網膜のみをサポートします。

initial-scale=.5, maximum-scale=.5, minimum-scale=.5を指定すると、すべてが50％でロックされます。したがって、スケーラビリティのない半ページがあります。

網膜（「ハイエンド」）デバイスをもっとカスタマイズするほど、標準ブラウザ（特に「ローエンド」、IE7など）で多くの問題が発生します。たとえば、IE7のJQM iconspriteの位置を確認します。メディアクエリをサポートするためにrespond.jsのようなスクリプトを含まない場合、アイコンはオフ位置になります。

現在のところ、JQMがクロスブラウザの網膜と網膜以外の解決策を提供するのに十分な網膜デバイスがないと思います。

良い情報が見つかりましたhere私はまた、IE7まで動作するCSS専用のiOS tab-barを行った。

プラグインで必要なCSSを確認して、アイコンとグラデーションの背景をすべてのブラウザでよく見えるようにし、IE7 + 8に合わせるために必要なCSSの量を増やしてください。網膜/網膜以外のJQM.cssファイルはダウンロードするのが楽しいでしょう:-)

Answer 2

あなたの場合、ビューポート全体ではなく画像のみをターゲットにする必要があります。 画像は通常のディスプレイよりも半分の大きさでなければなりません。