screen.widthとは異なるAPI /デバイス

Question

に異なる値をscreen.height

編集：。また、$（ '体'）で発生幅（）とwindow.outerWidth

API 2.3.3 HVGA

をする前に1：と

同じ画面幅（320）

API 3.0 WXGA

デバイス出力を回転した後、幅と高さは、例えばscreenWidthと

開始各回転を切り替えます280 screenheight：800 私は90 を回転させるには、今screenWidthがあります：800 screenheight：私は大きさに応じて回転 に一定の変更を行い、すべてのAPIをターゲットにしたいしたい場合は1280

ので、私は何をしますか？私はすべてのデバイスで同じ値が必要です。

編集：特定のものについては、パーセント値ではなくピクセル値が必要です。そのため、私はJavascriptを使って画面の幅に基づいてサイズを計算しています。画面幅もピクセル値であり、物事を比例的に保つことができるので、これはうまくいくでしょう。しかし、screen.widthで現在の幅がわかれば、それ以外は使えない場合があります...

- >絶対にレイアウトを使用し、すべてのピクセル値を必要とするスライダーを使い始めました。私はスライダーを再実装したくないので、画面の幅を使って画像のサイズとレイアウト全体を動的に計算することにしました。これらの値でスライダを初期化します。

http://ryangillespie.com/phonegap.php#/phonegap.php：ここ

更新

ルックは私がやろうとしているものと似たアプローチですか？ 「すべてを支配する一つの画面の解像度」2011年6月18日 の

エントリ私はまさにその例でも試してみました

は、私のコードでそれを貼り付けコピーします。しかし、それはどちらもうまくいかない。 window.outerWidthにはscreen.width（JQuery $（ 'body'）。width（））と同様に問題があります。デバイスが回転していない限り動作し、うまく初期化されます。しかし、最初のローテーションでは、デバイスに応じて、私は問題が発生します。それは期待どおりに動作し、他のものは値を入れ替えるので、私はポートレートモードでは幅が広く、風景では短く、他は固定幅と高さを、その他は回転しません。 ..

Answer 1

偶然私は、これが機能することを発見しました。私が知る限り、それはscreen.widthでも機能します。

私はscalingFactorを計算して要素を調整します。

レスポンシブCSS、メディアクエリなどを試しましたが、現在のスライドと新しい幅に基づいてスライダのマージンを再計算する必要があるため、何らかの点では意味がありません。これにはスクリプトが必要です。だから私はスクリプトですべてを作った。

私はwindow.onorientationchangeを削除しました。

Answer 2

私はphonegapがあなたの情報の中にどのように表示されているか分かりませんが、ネイティブのAndroidアプリケーションでは、さまざまな表示密度と画面サイズ/幅の異なるイメージリソースがあります。詳細については、このページを参照してください。http://developer.android.com/guide/practices/screens_support.html

Answer 3

レスポンシブウェブデザインテクニック。私は本の推薦と共に、私のブログで非常に簡単な例を挙げています。私は私のPhoneGapアプリの二つにメディアクエリを使用

http://simonmacdonald.blogspot.com/2012/01/on-eight-day-of-phonegapping-multiple.html

Answer 4

。異常の場合 を除いて、JavaScriptはありません。

@media画面と：

例えば、 "ベース" CSSは は次に:-)のようなブロックの追加、CSSのカスケード効果を使用して、幅320とポートレートとすることができる（MAX-幅：480PX）そして、（オリエンテーション：ポートレート）：私のlink'd CSSファイルでこれらのようなクエリでは

{さらに大きなものを作る}（と（800ピクセル分幅）

@mediaすべてと{より大きなものを作ります} device/os/phonegap 方向変更の処理）新しいレイアウトは自動的に発生します。

注：私はSimonのブログと彼が提案した資料を読んでこれをすべて学びました。これは、常に

$(window).resize(function() { 
    updateScaling($('body').width()); 
}); 

と呼ばれ、正しい幅を渡します。